javascript - ajax请求后将参数传递给 Angular 组件

Question

我正在处理 Angular 1 组件，我制作了一个数据表组件，它接受数据集作为参数。

这是我使用datatable组件的方式。

index.html

...
<datatable dataset="ViewModel.dataset"></datatable>
...

index.controller.js

(function() {

  'use strict';

  angular
    .module('DashboardApplication')
    .controller('PagesIndexController', PagesIndexController);

  function PagesIndexController() {

    var self = this;

    self.dataset = {};

    Restangular.one('someurl').get().then(function( pages ) {
      self.dataset = pages;
    });
  }
})();

datatable.component.js

(function() {

  'use strict';

  angular
    .module('DashboardApplication')
    .component('datatable', {
      bindings: {
        dataset: '<'
      },
      templateUrl: '/frontend/templates/dashboard/components/data-table.html',
      controller: 'DataTableController'
    });

})();

datatable.controller.js

(function() {

  'use strict';

  angular
    .module('DashboardApplication')
    .controller('DataTableController', DataTableController);

  function DataTableController() {
    var self = this;
    console.log(self.dataset); // which is undefined!
  }

})();

问题是我在 datatable.controller.js 中的 dataset 得到 undefined。有什么解决办法吗？!

Answer 1

使用 $onChanges 生命周期 Hook 来查看定义后的值:

  angular
    .module('DashboardApplication')
    .controller('DataTableController', DataTableController);

  function DataTableController() {
    var self = this;
    //console.log(self.dataset); // which is undefined!
    this.$onChanges = function(changesObj) {
        if (changesObj.dataset) {
            console.log(changesObj.dataset.currentValue);
        };
    });
  }

有关详细信息，请参阅AngularJS Developer Guide -- Components .