Angular: local scope property defined with '@' is not accessible from link function

angularjs, angularjs-directive, angularjs-scope

Solution

This is actually the expected result, quoted from angular doc:

... during the linking phase the interpolation hasn't been evaluated yet and so the value is at this time set to undefined.

If you want to get the value of the attribute, you can use `$observe` or `attrs.readonly`:

link: function (scope, elem, attrs) {
    ...

    console.log('readonly = ' + attrs.readonly);

    attrs.$observe('readonly', function(value) {
        console.log('readonly = ' + value);
    });

    ...
}

Problem

While I was trying to define some local scope property I found that properties defined with '@' is not accessible directly in the link function while it's not the case for those defined with '=' or '&' Here is the simple directive I wrote (jsfiddle): ``` angular.module('test', []) .controller('testCtrl', function($scope) { $scope.count1 = 5; }) .directive('testDir', function() { return { restrict: 'A', scope: { count: '=', readonly: '@' }, link: function (scope, elem, attrs) { console.log('Outside has count? '+('count' in scope)); console.log('Outside has readonly? '+('readonly' in scope)); scope.$watch('count', function(value){ console.log('Inside has count? '+('count' in scope)); console.log('Inside has readonly? '+('readonly' in scope)); elem.text(value); }); } }; }); ``` The output is: Outside has 'count'? true Outside has 'readonly'? false Inside has 'count'? true Inside has 'readonly'? true I have no idea why scope.readonly(@) is not defined outside scope.$watch function while it's not the case for scope.count(=)?

Original source