AngularJS directives attributes access from the controller

Question

I am trying to access the attributes of a directive in the controller function. However, by the time I access it, it is undefined. I noticed that if I do a simple timer it works

Answer 1

In an isolated scope, a local scope property defined with '@' can not be accessed in the linking function. As @remigio already mentioned, such local scope properties are undefined at that point. $attrs.$observe() or $scope.$watch() must be used to asynchronously obtain the (interpolated) value.

If you are passing a constant value in the attribute, (i.e., no interpolation required, i.e., the attribute's value doesn't contain any {{}}s) there is no need for '@' or $observer or $watch. You can use $attrs.attribute_name once as @hugo suggests, or if you are passing a number or a boolean and you want to get the proper type, you can use $scope.$eval($attrs.attribute_name) once.

If you use '=' to databind a local scope property to a parent scope property, the value of the property will be available in the linking function (no need for $observe or $watch or $eval).