Using angular variables inside non-angular attributes - angularjs

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.

Answer 1

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