Angularjs1.5中的组件绑定 - 将数据从一个控制器传递到另一个控制器

时间:2017-08-16 20:53:40

标签: angularjs angular-components angular-controller angular1.6

从我的决心获得帐户和人员阵列后,如何访问组件控制器中的人员和帐户?我也尝试在主ctl中定义acctTally并将其绑定到组件而没有运气。

我可以绑定人员和帐户只是找到组件并在组件模板中访问它,但我想在组件控制器中的任一阵列上工作就是我遇到问题的地方。我错过了什么关键概念????

  

主控制器

 angular.module('hellosolarsystem')
  .controller('AcctCtrl', function($scope, accounts, people){
    $scope.accounts = accounts;
    $scope.people = people;
  });
  

主要模板

<nav-bar></nav-bar>
<acct-list people="people" accounts="accounts"></acct-list>
  

组件

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'
})
  

组件模板

<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>

1 个答案:

答案 0 :(得分:1)

当您从AngularJS 1.6发布以来实例化控制器功能时,组件的绑定不可用。检查breaking changes here。调用$onInit钩子时可以使用绑定,而不像Angular 2+。当控制器通过执行

实例化时,甚至可以强制执行预填充绑定的旧行为
.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);
    })
 });
}