在ajax请求之后将参数传递给角度组件

Question

我正在处理角度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生命周期挂钩可在定义值时查看它：

  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开发人员指南-组件》 。

Answer 2

我想你想念一个

controllerAs: 'vm'

组件中的一行，它将模型绑定到控制器中的“ this”而不是$ scope（这也意味着您可以在视图内部以“ vm”的形式到达视图模型，例如：

ng-if="vm.dataset"

但我认为在那一刻仍将是不确定的，您这里有几种选择：

1. 您可以将promise传递给组件，然后在其上写一个

2. 您可以将ng-if =“ dataset && dataset.length”放在外部html中调用该组件的位置。 这样，只有当属性中实际有数据时，组件内部的逻辑才会触发。

    <datatable ng-if="ViewModel.dataset" dataset="ViewModel.dataset"></datatable> 

3. 您还可以在组件中编写如下代码：

    $scope.$watch('self.dataset', function () { if (self.dataset) { alert ('hi'); } });