Angular JS - using ControllerAs with nested custom directives

Question

As the title suggests I'm having a few issues on a Angular project which uses nested custom directives. I am creating an interface which allows users to filter a JSON feed of search results by clicking on checkboxes. The directive template hierarchy is as follows:

<filtergroup>
    <filter></filter>
</filtergroup>

I seem to be able to access variables defined in the filtergroup directive's controller within the template for the filtergroup. However I can't access the same variables from within the child directive, despite using

require: '^filtergroup'

Below are my directives:

.directive('filtergroup', [function(){
return{
    restrict: 'E',
    transclude: true,
    scope: { },
    template: '<div><ng-transclude></ng-transclude>{{filtergroup.variable}}</div>',
    bindToController: true,
    controllerAs: 'filtergroup',
    replace: true,
    controller: function() {
        var self = this;
           self.variable = "blah";
    }
};}])

.directive('filter', [function(){
return {
    restrict: 'E',
    template: '<div>{{filtergroup.variable}}</div>',
    require: '^filtergroup',
      scope: {},
    link: function(scope, elem, attr, filtergroupCtrl){
        scope.active = false;
    }
};}]);

I've also created a simplified Codepen of the issue at:

http://codepen.io/decodedcreative/pen/NrNqXm

Any help would be great as this is driving me crazy! Thanks

Alexander Kravets · Accepted Answer · 2016-06-12 11:40:27Z

1

By saying require: '^filtergroup' you're only asking to inject the filtergroup's controller to the link function. Then it's up to you how to use it.

In your case, you could add a filtergroupCtrl's reference to the filter's scope:

.directive('filter', [function(){
    return {
        // ...
        template: '<div>{{filtergroup.variable}}</div>',
        link: function(scope, elem, attr, filtergroupCtrl){
            scope.filtergroup = filtergroupCtrl;
            // ...
        }
    };
}]);

This way you'll be able to access it in the child's template the way you're attempting to do it:

<div>{{filtergroup.variable}}</div>

edited Jun 12, 2016 at 11:40

answered Jun 12, 2016 at 11:20

Alexander Kravets

4,4351 gold badge19 silver badges15 bronze badges

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

1 Comment

James Howell Over a year ago

Thanks so much for the help. I would never have worked that out. It's true that Angular has quite the learning curve!

Collectives™ on Stack Overflow

Angular JS - using ControllerAs with nested custom directives

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related