首页 文章

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

提问于
浏览 次
0

我是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”在html中包含了var . 我究竟做错了什么？

javascript html angularjs

2 回答

  • 1

    你非常接近 . 你需要别名控制器，不能直接引用它 . DEMO

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

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

    回复于
  • 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 .

    Note: Preferable Way is ControllerAs Syntax only.

    回复于

相关问题