如何从 AngularJS 组件访问控制器变量？答案

【问题标题】：How to access controller variables from AngularJS component?如何从 AngularJS 组件访问控制器变量？
【发布时间】：2017-09-17 00:09:09
【问题描述】：

我是 Angular JS 的新手，在我理解它们的大部分时间里我都在搞乱组件，但是我无法让我的组件从控制器访问任何变量，我知道组件的范围始终是孤立的，但我发誓我之前能够通过组件从控制器访问变量。这是代码

<div ng-app="ticket"  ng-controller="list">
        <list tickets="list.tickets"> </list>
    </div>

   var app = angular.module('ticket', []);
   app.controller('list',function($scope){
       this.tickets = [];        // populate on component function. 
    })
     .component('list', {  
       bindings: {
        tickets: '=',
        client_id:'<'
        },
       controller: function () {
         function pullTickets(){
            console.log(this.$tickets);
          }
          this.pullTickets = pullTickets;

      },
      template:[
        '<div class="main_list_container" ng-init="$ctrl.pullTickets()">',
        '</div>'
        ].join('')
    });


document.addEventListener('DOMContentLoaded', function () {
  angular.bootstrap(document, ['ticket']);
});

组件模板初始化时会调用 pulltickets 函数，但该函数一直说控制器中的 this.tickets 数组未定义，即使我通过 ticket="list.tickets" 将该 var 包含在 html 中也是如此。我究竟做错了什么？

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

如果您使用 this.tickets 则应使用 controllerAs 语法，然后将 ng-controller="list" 更新为 ng-controller="list as listCtrl" 并将 <list tickets="list.tickets"> </list> 更新为 <list tickets="listCtrl.tickets"> </list>

var app = angular.module('ticket', []);
app.controller('list',function($scope){
 this.tickets = [];        // populate on component function. 
})
.component('list', {  
 bindings: {
  tickets: '=',
  client_id:'<'
  },
 controller: function () {
   function pullTickets(){
      console.log(this.tickets);
    }
    this.pullTickets = pullTickets;

},
template:[
  '<div class="main_list_container" ng-init="$ctrl.pullTickets()">',
  '</div>'
  ].join('')
});


document.addEventListener('DOMContentLoaded', function () {
angular.bootstrap(document, ['ticket']);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>

<div ng-app="ticket"  ng-controller="list as listCtrl">
        <list tickets="listCtrl.tickets"> </list>
    </div>

或者如果您想使用 $scope 语法，请将 ng-controller="list" 更新为 ng-controller="list" 和 <list tickets="list.tickets"> </list> 更新为 <list tickets="tickets"> </list>

var app = angular.module('ticket', []);
app.controller('list',function($scope){
 $scope.tickets = [];        // populate on component function. 
})
.component('list', {  
 bindings: {
  tickets: '=',
  client_id:'<'
  },
 controller: function () {
this.$onInit = function() {
         console.log(this.tickets);
      };
},
template:[
  '<div class="main_list_container">',
  '</div>'
  ].join('')
});


document.addEventListener('DOMContentLoaded', function () {
angular.bootstrap(document, ['ticket']);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>

<div ng-app="ticket"  ng-controller="list">
  <list tickets="tickets"> </list>
</div>

并且不需要在组件中给出 this.$tickets 它应该是 this.tickets。

注意：首选方式仅是 ControllerAs 语法。

【讨论】：

谢谢！我现在明白了
如果您满意，请接受答案...提前致谢

【解决方案2】：

你已经很接近了。您需要给控制器起别名，不能直接引用它。 DEMO

<div ng-app="ticket" ng-controller="list as ctrl">
    <list tickets="ctrl.tickets"></list>
</div>

此外，您可能应该区分父控制器和组件控制器的名称；这样就不会那么混乱了。

【讨论】：