How to access controller variables from AngularJS component?

Question

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?

ankesh jain · Accepted Answer · 2017-09-17 03:31:33Z

1

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.

edited Sep 17, 2017 at 3:31

answered Sep 17, 2017 at 3:23

ankesh jain

1714 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

wontonman2 Over a year ago

Thanks! I got it now

ankesh jain Over a year ago

Please accept the answer if u r satisfied ... Thanks in advance

Ari · Accepted Answer · 2017-09-17 01:02:47Z

1

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.

answered Sep 17, 2017 at 1:02

Ari

1,72313 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to access controller variables from AngularJS component?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related