Ng-attr does not evaluate directive element

Question

I am trying to transfer data from a controller to an isolated area using element attributes. Here is my tag in the view:

<comment ng-attr-cid="{{question.id}}" ctype="questions"></div>

And here is the directive:

'use strict'

angular.module('arlo.directives').directive "comment", ['Comment', (Comment) ->
  directive =
    templateUrl: "angular/partials/comment.html"
    restrict: "E"
    scope:
      cid: "="
      ctype: "="

    link: (scope, element, attrs) ->
      scope.toggled = false
      scope.comment = null
      scope.comments

      scope.toggle = ->
        if scope.toggled is true then scope.toggled = false else scope.toggled = true
        scope.comment = null

      scope.addComment = ->
        Comment.addComment(scope.ctype, scope.cid, scope.comment).then ->
          scope.comments = Comments.commentsList
          scope.toggled = false
          scope.comment = null

      scope.loadComments = ->
        Comment.loadComments(scope.ctype, scope.cid).then ->
          scope.comments = Comments.commentsList

      scope.loadComments()
]

The problem is that cid gets the assigned "{{question.id}}" instead of the value of the question.id value. I tried using ng-attr-cid = "question.id", but that does not work either. In addition, ctype is rated as undefined.

If I add ng-attr-cid for any other element, it will evaluate and add cid = "" to the element.

Can someone explain what I am missing?

Answer 1

( ) .

ng-attr, .

• "=" , , . cid="question.id"
• "@" - , , . cid="{{question.id}}". .

• ng-attr
• scope.cid "@" cid="question.id" HTML
• questions ( , , <ctype undefined , questions undefined.

plnkr, .

Answer 2

, ng-attr cid, , , , cid , angular ng-attr - *.

, , cid, ng-attr-cid, cid: '=' .

... your existing directive definition ...
link: function link(scope, elem, attrs) {
  attrs.$observe('cid', function(val) {
    scope['cid'] = val;
  });
}
... etc, etc ...

cid , .

. plnkr.