等待子组件的绑定更新传播到 AngularJS 中的父组件

Question

我是 AngularJS 的新手。我正在尝试构建一个用于更新当前页面的分页组件。我遇到的问题是，当组件对具有双向绑定的值进行更改时。新值不会立即提供给父级。

为了等待绑定值更新，我应该做些什么吗？或者这是一个模式问题，我应该采取不同的方法来解决问题？

组件 - paging.js

angular.module('someModule')
.component('paging', {
bindings: {
  page:   '=',
  getNextPage: '='  // <- Side note: This is a function, I had problems using the '&' binding
},
controller: function($scope) {
    var $ctrl = this;

    $ctrl.nextPage = function () {
      $ctrl.page++;
      $ctrl.getNextPage();   // <-- Parent will still have the old value for 'page'

      // THIS WOULD WORK, PARENT WOULD HAVE THE UPDATED VALUE FOR 'page'
      // setTimeout(function(){
      //   $ctrl.action();  
      // }, 1000);

      // COULD ALSO PASS THE VALUE THIS WAY
      // $ctrl.action($ctrl.page); 
    }

});

父控制器

...
  $scope.getNextPage = function () {
      $scope.page; // <- This still has the old value 
      ...
  }

...

Answer 1

首先，查看jsFiddle，您可以在其中看到四个不同的页面索引绑定选项。

检查您发布的代码，我没有发现任何问题，可能您的问题出在 HTML 模板中。

选项1：绑定page变量并在组件内部增加它

HTML：

<div ng-controller="parentCtrl">
    <paging page="page"></paging>
</div>

控制器：

function parentCtrl($scope) {
    $scope.page = 1;
}

组件：

var pagingComponent = {
    bindings: {
        page: '='
    },
    template: '<div><button ng-click="$ctrl.nextPage();">Next Page</button></div>',
    controller: function() {
        var $ctrl = this;

        $ctrl.nextPage = function() {
           $ctrl.page++;
        };
    }
}

选项 2： 绑定 getNextPage() 函数表单父控制器

HTML：

<div ng-controller="parentCtrl">
    <paging get-next-page="getNextPage()"></paging>
</div>

控制器：

function parentCtrl($scope) {
    $scope.page = 1;
    $scope.getNextPage = function(page) {
        $scope.page++;
    }
}

组件：

var pagingComponent = {
    bindings: {
        getNextPage : '&'
    },
    template: '<div><button ng-click="$ctrl.nextPage();">Next Page</button></div',
    controller: function() {
        var $ctrl = this;

        $ctrl.nextPage = function() {
           $ctrl.getNextPage();
        };
    }
}