Angularjs Extended Directive Controller

Question

I'm trying to extend a directive by passing controllers. I'm able to grab the parent directive's controller through require , but I also want to define a controller on the extended controller.

.directive('smelly', function(){
  return {
    restrict: 'E',
    controller: function(){
      this.doWork = function(){ alert('smelly work'); };
    },
    link: function($scope, $element, $attributes, controller){     
      $element.bind('click',function(){
        controller.doWork();
      });
    }
  };
})
.directive('xtSmelly', function(){
  return {    
    controller: function(){
      this.name = "brian";
    },
    require: 'smelly',
    link: function($scope, $element, $attributes, smellyController){
      smellyController.doWork = function(){
        alert('xt-smelly work by: ' + xtSmellyController.name);
      };
    }
  };
})

HTML
<smelly xt-smelly>click me</smelly>

How can I access xtSmellyController.name?

trekforever · Accepted Answer · 2013-11-14 20:42:56Z

1

You can use the $scope variable, both controllers will have access to that

return {    
controller: function($scope){
  $scope.name = "brian";
},
require: 'smelly',
link: function($scope, $element, $attributes, smellyController){
  smellyController.doWork = function(){
    alert('xt-smelly work by: ' + $scope.name);
  };
}

};

Example: http://plnkr.co/edit/dYIr36lKtnybxvkUlOJ1?p=preview

answered Nov 14, 2013 at 20:42

trekforever

3,93227 silver badges29 bronze badges

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

1 Comment

user2809175 Over a year ago

Hmm, it works, but is it the right way? Doesn't it ruin separation of concerns by throwing it into the scope?

Erd · Accepted Answer · 2014-06-26 16:31:00Z

require can take an array, the fourth arg in the link function then also becomes an array with the requested controllers in the same order as specified in the require array

.directive('smelly', function(){
  return {
    restrict: 'E',
    controller: function(){
      this.doWork = function(){ alert('smelly work'); };
    },
    link: function($scope, $element, $attributes, controller){     
      $element.bind('click',function(){
        controller.doWork();
      });
    }
  };
})
.directive('xtSmelly', function(){
  return {    
    controller: function(){
      this.name = "brian";
    },
    require: ['smelly', 'xtSmelly'],
    link: function($scope, $element, $attributes, controllers){
      var smellyController = controllers[0];
      var xtSmellyController = controllers[1];
      smellyController.doWork = function(){
        alert('xt-smelly work by: ' + xtSmellyController.name);
      };
    }
  };
})

HTML
<smelly xt-smelly>click me</smelly>

Collectives™ on Stack Overflow

Angularjs Extended Directive Controller

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related