组件,在 Angularjs 1.5 中绑定——将数据从一个控制器传递到另一个控制器
Components, binding in Angularjs1.5 - Passing data from one controller to another
在我从我的解决方案中得到帐户和人员数组后,如何在组件控制器中访问人员和帐户?我还尝试在主 ctl 中定义 acctTally 并将其绑定到组件,但没有成功。
我可以将人员和帐户绑定到组件并在组件模板中访问它,但我想在组件控制器中的任一数组上工作是我遇到问题的地方。我错过了什么关键概念????
main controller
angular.module('hellosolarsystem')
.controller('AcctCtrl', function($scope, accounts, people){
$scope.accounts = accounts;
$scope.people = people;
});
Main template
<nav-bar></nav-bar>
<acct-list people="people" accounts="accounts"></acct-list>
Component
function aCtrl(){
var ctrl = this;
ctrl.acctTally = [];
ctrl.uniqueAcct = [];
//Array of all accounts
$scope.people.data.forEach(function(person){
person.account_types.forEach(function(account){
ctrl.acctTally.push(account.name);
})
});
}
angular.module('hellosolarsystem').component('acctList', {
bindings: { accounts: '<',
people: '<'
},
controller: aCtrl,
templateUrl: 'javascripts/app/components/accounts/acctsList/index.html'
})
Component Template
<table class = "table">
<thead>
<tr>
<th>Accounts</th>
<th>Number of Accounts Assigned Users</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "acct in $ctrl.acctTally">
<td>{{acct.name}}</td>
<td>{acct.tally}}<</td>
<td>
<button class = "btn btn-info" ng-click = "editUser($index)">Edit</button>
<button class = "btn btn-danger" ng-click = "deleteUser($index)">Delete</button>
</td>
</tr>
</tbody>
</table>
自 AngularJS 1.6 版本以来,当控制器功能被实例化时,组件的绑定不可用。检查 breaking changes here。与 Angular 2+ 不同,调用 $onInit
挂钩时绑定将可用。当控制器通过 doing
实例化时,您甚至可以强制执行预填充绑定的旧行为
.config(function($compileProvider) {
$compileProvider.preAssignBindingsEnabled(true);
})
但是 Angular 团队非常不鼓励这样做。
根据 1.6.0 重大更改,您必须将代码移动到 $onInit
钩子来解决您的问题。
ctrl.$onInit = function() {
ctrl.people.data.forEach(function(person){
person.account_types.forEach(function(account){
ctrl.acctTally.push(account.name);
})
});
}
在我从我的解决方案中得到帐户和人员数组后,如何在组件控制器中访问人员和帐户?我还尝试在主 ctl 中定义 acctTally 并将其绑定到组件,但没有成功。
我可以将人员和帐户绑定到组件并在组件模板中访问它,但我想在组件控制器中的任一数组上工作是我遇到问题的地方。我错过了什么关键概念????
main controller
angular.module('hellosolarsystem')
.controller('AcctCtrl', function($scope, accounts, people){
$scope.accounts = accounts;
$scope.people = people;
});
Main template
<nav-bar></nav-bar>
<acct-list people="people" accounts="accounts"></acct-list>
Component
function aCtrl(){
var ctrl = this;
ctrl.acctTally = [];
ctrl.uniqueAcct = [];
//Array of all accounts
$scope.people.data.forEach(function(person){
person.account_types.forEach(function(account){
ctrl.acctTally.push(account.name);
})
});
}
angular.module('hellosolarsystem').component('acctList', {
bindings: { accounts: '<',
people: '<'
},
controller: aCtrl,
templateUrl: 'javascripts/app/components/accounts/acctsList/index.html'
})
Component Template
<table class = "table">
<thead>
<tr>
<th>Accounts</th>
<th>Number of Accounts Assigned Users</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "acct in $ctrl.acctTally">
<td>{{acct.name}}</td>
<td>{acct.tally}}<</td>
<td>
<button class = "btn btn-info" ng-click = "editUser($index)">Edit</button>
<button class = "btn btn-danger" ng-click = "deleteUser($index)">Delete</button>
</td>
</tr>
</tbody>
</table>
自 AngularJS 1.6 版本以来,当控制器功能被实例化时,组件的绑定不可用。检查 breaking changes here。与 Angular 2+ 不同,调用 $onInit
挂钩时绑定将可用。当控制器通过 doing
.config(function($compileProvider) {
$compileProvider.preAssignBindingsEnabled(true);
})
但是 Angular 团队非常不鼓励这样做。
根据 1.6.0 重大更改,您必须将代码移动到 $onInit
钩子来解决您的问题。
ctrl.$onInit = function() {
ctrl.people.data.forEach(function(person){
person.account_types.forEach(function(account){
ctrl.acctTally.push(account.name);
})
});
}