Angularjs指令将变量传递给子指令

Question

In my Angularjs project, I've run into a problem with directive nesting and variable passing.

I made a directive 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;
            }
        }
    }
}

And in the template, use another directive:

<div class="description" votable show-vote="showDescriptions"></div>

and the votable directive:

.directive('votable', [function() {
    return {
        restrict: 'A',
        scope: {
            showVote: '='
        },
        templateUrl: 'votable.tpl.html',
    }
}

in votable.html:

<div class="vote" ng-show="showVote"></div>

When I run this, the vote icon should be hidden to start, but it is showing.

I have another element + directive combo:

<div expandable expand="expandDescriptions" ng-show="showDescriptions"></div>

This directive is hidden at the start, but after expanding, it cannot collapse even though it's toggling the showDescriptions variable.

Do I need to do something special to pass a variable from the scope of a directive into the scope of a sub-directive?

Answer 1

With nested directives, the child directive will have its data bound before the link function for the parent directive is run. If you need to have some value in the parent scope available in order for the child directive to render properly, you need to bind that in the preLink of the parent directive. Add a compile function such that it returns your preLink function, and it should be fine, like so:

compile: function() {
    return {
        pre: function preLink(scope, elem, attrs) {
            scope.showDescriptions = false;
            scope.expandDescriptions = function() {
            ...
            scope.showDescriptions = !scope.showDescriptions;
        }
    }
}