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

问题描述

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

I am new to Angular JS and I was messing around with the components for the most part I understand them, but I cannot get my component to access any variables from the controller, I know the scope of components is always isolated but I swear I was able to access variables from a controller via the component before. Here's the code

<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中也是如此.我究竟做错了什么?

---

The pulltickets function is called when the components template is initialized but the function keeps saying that the this.tickets array from the controller is undefined, even when I included that var in the html via ticket="list.tickets". What am I doing wrong?

推荐答案

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

If you use this.tickets then controllerAs syntax shoud be used then update ng-controller="list" to ng-controller="list as listCtrl" and <list tickets="list.tickets"> </list> to <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" 和< listtickets ="list.tickets"></list> 到< list tickets ="tickets"></list>

or If you want to use $scope syntax then update ng-controller="list" to ng-controller="list" and <list tickets="list.tickets"> </list> to <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.

and no need to give this.$tickets in components it should be this.tickets.

注意:首选方式仅是ControllerAs语法.

这篇关于如何从AngularJS组件访问控制器变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！