CODEWITHSUNDEEP
javascriptangularjs
Jonathan.
Jonathan.

Reputation: 55544

Curly braces in directive attribute, angularJS

I have a directive which uses the id parameter to get an array in the controller's scope, which works fine if the id is static value, however if I use curly braces (for example I repeat the directive using ng-repeat and so each id needs to be unique, though if I use another attribute than id it still doesn't work), then it doesn't work, the curly braces are not evaluated, and looking at the source in the web inspector, it is literally id={{index}} rather than id=1.

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

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

The stack.html template simply contains (at the moment it will be expanded later):

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

So if I have this in my index.html:

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

The result is:

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

(and if I were to add a card to the deck array, then both zeros would change to one)

The above works, as it doesn't use ng-repeat, the attributes are hardcoded. Below the attributes need to be dynamic, and this doesn't work as the curly braces are not evaluated.

However if I want to have multiple decks by using ng-repeat it doesn't work:

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

then the id remains literally "slot{{index}}", not "slot0", etc.

I could do:

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

and it would work as I expect.

It's almost like I need the cards: '=id', to be cards: '=$parse(id)', (or maybe only parse if it contains braces)

Upvotes: 5

Views: 6371

Answers (2)

sylwester
sylwester

Reputation: 16498

please see here http://jsfiddle.net/4su41a8e/2/

  • curly braces for one way binding
  • no braces for two way binding

HTML:

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

DIRECTIVE:

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

Upvotes: 7

bengro
bengro

Reputation: 1014

Inside the ng-repeat use:

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

You don't want the interpolated value, but the reference to the value.

In the directive, you then use data-binding (on that note you can use = or @) to bind the index to the cards variable. You now have the actual index value in the link function, accessible through cards.

Here a snippet that contains your exact problem, http://jsbin.com/iMezAFa/2/edit.

Upvotes: 0

Related Questions