angularjs ng-class in nested directive

Question

Tried so many different ways and still can't figure this. I have a menu with ng-class="{menuVisibleAnimation: menuOpen}" in a template in a nested directive. When I click on the button in the parent directive I want to change the value of menuOpen to true but the menu in the child directive is not updating?

http://plnkr.co/edit/nOunKkch0Gt8hjMWtruA?p=preview

When i click the button, the class is toggling on and off for the div: <div class="view menuVisibleAnimation" data-ng-class="{menuVisibleAnimation: menuOpen}"><p>the view</p></div> — Chris White
– Chris White, Commented Jun 21, 2013 at 0:30
The idea is that when I click on the button both the view div and <div class="menu" data-ng-class="{menuVisibleAnimation: menuOpen}" data-ng-transclude></div>. As you said, only the view div is toggling but not the menu — otissv
– otissv, Commented Jun 21, 2013 at 8:24

Bastien Caudan · Accepted Answer · 2013-06-22 10:48:18Z

1

The main issue in your implementation is that you want to use the the $scope to share the value of menuOpen between the parent and child directive, but your parent directive has an isolated scope :

scope: {
  menuOpen: '@menuOpen'
}

You need to declare menuOpen in a scope shared by both directives, due to transclusion it has to be the parent scope of the parent directive. So, in the parent directive you should not create a new scope :

scope: false,
link: function($scope) {      
  $scope.menuOpen = false;
  $scope.toggleMenu = function() {
    $scope.menuOpen = !$scope.menuOpen;
  };
}

Then, openMenu is accessible in the child directive. See it in in a fork of your Plunker.

answered Jun 22, 2013 at 10:48

Bastien Caudan

4,4901 gold badge19 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

angularjs ng-class in nested directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related