在 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
中得到 dataset
的 undefined
。有解决办法吗?!
我想你错过了
controllerAs: 'vm'
组件中的行,它将模型绑定到控制器中的 "this" 而不是 $scope (也意味着您可以在视图中以 "vm" 的形式访问视图模型,例如:
ng-if="vm.dataset"
但我认为在那一刻它仍然是未定义的,你有几个选择:
- 你可以将 promise 传递给组件,然后在上面写一个 then
您可以在外部 html 中调用组件的地方放置一个 ng-if="dataset && dataset.length"。这样,组件内部的逻辑只会在 属性.
中实际存在数据时触发
<datatable ng-if="ViewModel.dataset" dataset="ViewModel.dataset"></datatable>
你也可以在你的组件中这样写:
$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。
我正在处理 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
。有解决办法吗?!
我想你错过了
controllerAs: 'vm'
组件中的行,它将模型绑定到控制器中的 "this" 而不是 $scope (也意味着您可以在视图中以 "vm" 的形式访问视图模型,例如:
ng-if="vm.dataset"
但我认为在那一刻它仍然是未定义的,你有几个选择:
- 你可以将 promise 传递给组件,然后在上面写一个 then
您可以在外部 html 中调用组件的地方放置一个 ng-if="dataset && dataset.length"。这样,组件内部的逻辑只会在 属性.
中实际存在数据时触发<datatable ng-if="ViewModel.dataset" dataset="ViewModel.dataset"></datatable>
你也可以在你的组件中这样写:
$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。