Why can't I get the attribute value of my custom directive?

Question

The angularjs code:

app.directive('test', function(){
  return {
    restrict: 'A',
    scope: {
      myId: '@'
    },
    link: function(scope) {
      alert(scope.myId);
    }
  }
});

You can see there is a scope: { myId: '@' } in the directive.

And the html code:

<div test my-id='123'></div>

You can see I defined a my-id='123'.

I hope the directive will alert 123, but it alerted undefined. Where is my mistake?

PS: here is a live demo: http://plnkr.co/edit/sL69NqWC70Qfwav5feP2?p=preview

Answer 1

You need to $observe attributes (as described in the "Attributes" section of http://docs.angularjs.org/guide/directive) to get the proper value of interpolated attributes.

Here is a working plunk: http://plnkr.co/edit/NtIHmdoO7IAEwE74ifB5?p=preview

This is essentially duplicate of the angularjs : logging scope property in directive link function displays undefined. It should be also noted that the PR https://github.com/angular/angular.js/pull/1555 was merged recently and your plunker should work without using $observe in the future versions of AngularJS.

--

The demo in question is worked in latest version: 1.1.3, you can try it (and change the angularjs url to 1.1.3).