CODEWITHSUNDEEP
javascripthtmlangularjs
wontonman2
wontonman2

Reputation: 25

How to access controller variables from AngularJS component?

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

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?

Upvotes: 0

Views: 5763

Answers (2)

ankesh jain
ankesh jain

Reputation: 171

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>

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>

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

Note: Preferable Way is ControllerAs Syntax only.

Upvotes: 1

Ari
Ari

Reputation: 1703

You were pretty close. You needed to alias the controller, can't refer to it directly. DEMO

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

Also, you should probably differentiate between the name for the parent controller and the component controller; less confusing that way.

Upvotes: 1

Related Questions