Using angular variables inside non-angular attributes

Question

Something I am not understanding about angular is the consistency behind the usage of braces.

say I want to pass in an angular var into an ng-click function:

ng-click="getComments('{{post.Id}}')"

this looks ok in the HTML. but when I click, the parameter is actually still '{{post.Id}}' even though in the html code it was replaced by angular.

also say I want to do this:

   <customDirective customAttribute="{{post.Id}}_postID" ></customDirective>

this throws a parsing error and I don't know why. here is the error:

Syntax Error: Token 'post.Id' is unexpected, expecting [:] at column 3 of the expression [{post.Id}}_postID] starting at [post.Id}}_postID].

all the above code is within an ng-repeat.

I believe you'll find your answer here: http://stackoverflow.com/questions/17878560/difference-between-double-and-single-curly-brace-in-angular-js — Jake Johnson, Mar 25 '14 at 02:38

score 0 · Answer 1 · edited May 23 '17 at 12:07

0

In the case of ng-click="" whatever is passed between the quotation marks is code, here all variables defined as $scope.variable are simply available as variable, so working code would be

ng-click="getComments(post.id)"

As to the second part, when writing your own directive you specify the attributes to be passed to it like so:

scope: {
    attrA: '@',
    attrB: '='
}

attrA will bind as a string while attrB will bind as an object, or whatever type variable it may be. For details see this SO answer to ensure you are using the right binding for your use-case.

So your second code sample should read:

<customDirective customAttribute="{{post.Id}}+'_postID'" ></customDirective>

as all text inside the brackets should be seen as code as used when defining any other JS variable.

As to the whole conundrum of when to use which braces in AngularJS, here is a great SO answer on the topic.

Edit:

I have tried out some alternatives for your directive problem, this one works but doesn't update after value changes if that matters:

<customDirective customAttribute="post.Id+'_postID'" ></customDirective>

Though I would suggest that you are approaching a problem with the wrong solution, given that you aren't just interested in figuring out Angular's binding system.

The best solution would be to edit the string in teh directive, or bind an object referencing a function to ensure all changes are propagated:

$scope.post = function(){
  return {
     id: $scope.someVar.id + "_id"
  };
};

edited May 23 '17 at 12:07

Community

1
1

answered Mar 24 '14 at 22:27

caffeinated.tech

6,428
1
21
40

1

getting close. this is quite weird. I still get parsing error when I use customAttribute="{{post.Id}}+'_postID'". I do have the Attr: '=' on the directive as well. However THIS works: customAttribute="'{{post.Id}}_postID'". that's the ONLY way I won't get the parsing error! but the only thing with this way, is that in the HTML it actually looks like customAttribute="'ID_postID'". now I'm quite confused as to what angular is doing and what it expects... any idea? – ijjo Mar 24 '14 at 23:12
sorry the formatting is bad in the comments, but those are double quotes surrounding a single quote. – ijjo Mar 24 '14 at 23:13
1

try doing it like this instead. – ryeballar Mar 24 '14 at 23:15
didn't work either. customAttribute="'{{post.Id}}_postID'" seems to be the only thing that doesn't throw a parsing error (which recall leaves the attribute surrounded by single quote in the html) I wonder if it's directive related. i don't think i've seen this problem before. – ijjo Mar 25 '14 at 01:14
intersting, in a different directive i have, this works:
,without using the '+'. is that surprising to you? – ijjo Mar 25 '14 at 01:53

Using angular variables inside non-angular attributes

1 Answers1