angularjs - 等待子组件的绑定(bind)更新传播到 AngularJS 中的父组件

Question

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

我应该做什么才能等待绑定(bind)值更新？或者这是一个模式问题，我应该采取不同的方法来解决问题？

组件 - 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); 
    }

});

父 Controller

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

...

Answer 1

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

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

选项 1:绑定(bind) page 变量并在组件内增加它

HTML:

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

Controller :

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:从父 Controller 绑定(bind) getNextPage() 函数

HTML:

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

Controller :

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();
        };
    }
}