Geek Answers Handbook

Curly braces in the attribute of the directive, angular

I have a directive that uses a parameter idto get an array in the controller area, which works fine if the identifier is a static value, however, if I use curly braces (for example, I repeat the directive using ng-repeat and therefore each identifier must be unique , although if I use a different attribute than id, it still does not work), then it does not work, curly braces are not evaluated and, looking at the source in the web inspector, literally id={{index}}, not id=1.

EDIT: What I'm trying to do is when there is a stack element in html, it creates a variable in the current scope (not the scope) with the same name as the identifier.

app.directive('stack', function() {
    return {
        restrict: 'E',
        templateUrl: 'stack.html',
        scope: {
            cards: '=id',
            name: '@id',
            countOnly: '@'
        },
        link: function(scope) {
            scope.cards = [];
            //because of cards: '=id', scope.cards is bound to the parentscope.<value of id attr>, so setting scope.cards to [], also creates the variable in the parent scope.
        }
    };
});

stack.html ( ):

<div class="stack">The stack called {{name}} contains {{cards.length}} cards</div>

, index.html:

<stack id="deck"></stack>
<span>There are {{deck.length}} cards in deck</span>

:

The stack called deck contains 0 cards
There are 0 cards in deck

( , )

, ng-repeat, . , , .

, ng-repeat, :

<stack ng-repeat="index in range(5)" id="slot{{index}}"></stack>

id " {{index}}", "slot0" ..

:

<stack id="slot0"></stack>
<stack id="slot1"></stack>
<stack id="slot2"></stack>
<stack id="slot3"></stack>
<stack id="slot4"></stack>

, .

, cards: '=id', cards: '=$parse(id)' (, , , )

+4
2

. http://jsfiddle.net/4su41a8e/2/

HTML:

<div ng-app="app">
    <div ng-controller="firstCtrl">
        <stack ng-repeat="card in range" item="card" name="{{card.name}}"></stack>
    </div>
</div>

:

app.directive('stack', function () {
    return {
        restrict: 'AE',
        template: '<h2>cards id: {{cards.id}} </h2><p>name:{{name}}</p>',
        scope: {
            cards: '=item',
            name: '@name',
            countOnly: '@'
        }
    };
});
+6

ng-repeat :

<stack id="index"></stack>

, .

( = @) . , .

, , http://jsbin.com/iMezAFa/2/edit.

0

More articles:


All Articles