Question

我是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数组是未定义的，即使我在html中通过ticket包含了var =＆＃34; list.tickets＆＃34 ;.我究竟做错了什么？

Answer 1

你非常接近。您需要为控制器设置别名，无法直接引用它。 DEMO

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

此外，您应该区分父控制器的名称和组件控制器;不那么混乱。

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

注意：优选方式仅限于ControllerAs语法。

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

2 个答案: