Question

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

以下是我使用clear: both组件的方式。

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! } })();中undefined获得了dataset。对此有什么解决方案吗？！

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 Developer Guide -- Components。

Answer 2

我认为你错过了

controllerAs: 'vm'

来自您的组件的行，它会将模型绑定到您的控制器中的“this”而不是$ scope（也意味着您可以在视图中以“vm”的形式访问您的viewmodel，例如：

ng-if="vm.dataset"

但是我认为在那个确切的时刻它仍然是未定义的，你有几个选择：

您可以将承诺传递给组件并在其上写下
您可以在外部html中调用组件的ng-if =“dataset＆amp;＆amp;＆quot; dataset.length”。这样，只有属性中存在实际数据时，组件内的逻辑才会触发。
```
<datatable ng-if="ViewModel.dataset" dataset="ViewModel.dataset"></datatable>
```

你也可以在你的组件中写下这样的东西：

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

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

2 个答案: