在 ajax 请求后将参数传递给 angular 组件

pass parameter to angular component after ajax request

我正在处理 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 中得到 datasetundefined。有解决办法吗?!

我想你错过了

controllerAs: 'vm'

组件中的行,它将模型绑定到控制器中的 "this" 而不是 $scope (也意味着您可以在视图中以 "vm" 的形式访问视图模型,例如:

ng-if="vm.dataset"

但我认为在那一刻它仍然是未定义的,你有几个选择:

  1. 你可以将 promise 传递给组件,然后在上面写一个 then
  2. 您可以在外部 html 中调用组件的地方放置一个 ng-if="dataset && dataset.length"。这样,组件内部的逻辑只会在 属性.

    中实际存在数据时触发
    <datatable ng-if="ViewModel.dataset" dataset="ViewModel.dataset"></datatable>
    
  3. 你也可以在你的组件中这样写:

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

使用 $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 Developer Guide -- Components