Angularjs directive passing variables to sub-directive

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?

Answers


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;
        }
    }
}

Need Your Help

Perform Fuzzy Search on Wikipedia

wikipedia wikipedia-api fuzzy-search

I'm trying to retrieve the page of the author Agatha Christie from Wikipedia exploiting its API. Wikipedia seems to perform this work quite well:

Can Update a photo tags in existing One

c# facebook facebook-graph-api facebook-c#-sdk

My question is can able to add a tag from existing one (means existing phtos).Now iam able to tag a friends in fresh upload using this code