While working on my Angularjs project, I encountered an issue with directive nesting and passing variables.
To start, I created a directive called 'header':
.directive('header', [function() {
return {
restrict: 'E',
scope: {},
templateUrl: 'header.tpl.html',
link: function(scope, elem, attrs) {
scope.showDescriptions = false;
scope.expandDescriptions = function() {
...
scope.showDescriptions = !scope.showDescriptions;
}
}
}
}
Within the template of this directive, I used another directive:
<div class="description" votable show-vote="showDescriptions"></div>
This brings us to the 'votable' directive:
.directive('votable', [function() {
return {
restrict: 'A',
scope: {
showVote: '='
},
templateUrl: 'votable.tpl.html',
}
}
In the votable.html file:
<div class="vote" ng-show="showVote"></div>
Upon running this code, the vote icon is supposed to be hidden initially, but it's visible instead.
Next, there's another element + directive combination:
<div expandable expand="expandDescriptions" ng-show="showDescriptions"></div>
Even though this directive starts off hidden, after expanding, it won't collapse despite toggling the 'showDescriptions' variable.
I am left wondering if there is a specific method required to pass a variable from a directive's scope into the scope of a sub-directive?