Using directives with controllerAs

Question

As far as I know using controller property on 'Directive Definition Object' will create a separate instance of that controller everytime a given directive is linked?

Now playing with controllerAs patters I can see that when each of directives is being compiled the controller factory function is being triggered giving a different result for this.data.hello method.

But in my view I'm getting last instance of that controller. Why is that? What am I missing?

js

angular.module('app', [])
  .controller('customCtrl', function () {
      console.log('controller');

      this.data = {
          hello: Math.floor(Math.random() * 200 + 1)
      };
  })
  .directive('customDrv', function () {
      var linkFn = function (scope, element, attrs, ctrl) {
          console.log('link');
          console.log(ctrl.data.hello);
      };

      return {
          templateUrl: 'Home/CustomDrv',
          restrict: 'E',
          controller: 'customCtrl',
          controllerAs: 'vm',
          compile: function (element, attrs) {
              console.log('compile');

              return linkFn
          }
      }
  })

Html

<custom-drv></custom-drv>
<custom-drv></custom-drv>
<custom-drv></custom-drv>
<custom-drv></custom-drv>

Plunker: https://plnkr.co/edit/HII9a7Ff6ryXuz6Fgzr6

Sumit Deshpande · Accepted Answer · 2016-05-04 16:28:37Z

3

To get the different result for this.data.hello method create isolated scope as -

angular.module('app', [])
  .controller('customCtrl', function () {
      //console.log('controller');

      this.data = {
          hello: Math.floor(Math.random() * 200 + 1)
      };
  })
  .directive('customDrv', function () {
      var linkFn = function (scope, element, attrs, ctrl) {
          //console.log('link');
          console.log(ctrl.data.hello);
      };

      return {
          template: '<h1>{{vm.data.hello}}</h1>',
          restrict: 'E',
          scope: {},
          controller: 'customCtrl',
          controllerAs: 'vm',
          compile: function (element, attrs) {
              //console.log('compile');

              return linkFn
          }
      }
  })

answered May 4, 2016 at 16:28

Sumit Deshpande

2,1552 gold badges21 silver badges36 bronze badges

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

2 Comments

Petr Averyanov Over a year ago

or extend scope (scope: true)

Chris Hermut Over a year ago

You're right. Forgot to isolate directive scope. Thanks

Muli Yulzary · Accepted Answer · 2016-05-04 16:28:26Z

this.data = {
      hello: Math.floor(Math.random() * 200 + 1)
  }

Sets data.hello only one time (on controller load). If you want a different outcome everytime you'd say:

this.data = {
      hello: function(){
        return Math.floor(Math.random() * 200 + 1);
      }
  }

And invoke it with

ctrl.data.hello()

Working plunkr

However you probably want to pass hello function through the binding and not access it directly from the directive (better practice):

Markup:

<custom-drv hello="hello"></custom-drv>

Directive:

.directive('customDrv', function () {
  var linkFn = function (scope, element, attrs, ctrl) {
      console.log('link');
      console.log(ctrl.hello);
  };

  return {
      template: '<h1>{{vm.hello()}}</h1>',
      restrict: 'E',
      scope: {
       hello: '&' //represent function binding
      }
      controller: 'customCtrl',
      controllerAs: 'vm',
      compile: function (element, attrs) {
          console.log('compile');

          return linkFn
      }
  }
})

Collectives™ on Stack Overflow

Using directives with controllerAs

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