AngularJS : Initializing isolated scope inside a directive

Question

I have created a directive that accepts some attributes and initializes the isolated scope with these attributes. If an attribute isn't specified, then the isolated scope should be initialized with a calculated value.

I added a link function that inspects the scope and initializes the default values (if no value has been set using the attributes). The scope has been initialized, but if I set a default value then it will be overwritten later by the framework.

A workaround is to use $timeout(...) and set it afterwards, but this seems too much of a hack.

function ($timeout) {
  return {
    scope: { msg1: '@', msg2: '@' },
    template: '<div>{{msg1}} {{msg2}} {{msg3}}</div>',
    link: function ($scope, $elt, $attr) {
      var action = function() {
        if (!$scope.msg2) $scope.msg1 = 'msg1';
        if (!$scope.msg2) $scope.msg2 = 'msg2';
        if (!$scope.msg3) $scope.msg3 = 'msg3';                
      };
      action();
      //$timeout(action, 0);
    }
  };
});

I have prepared a JSFiddle to illustrate what is happening.

• msg1 is initialized via the attribute and has the correct value at all times.
• msg2 is not initialized via an attribute, but can be set using an attribute. This value is overwritten after the link method has been called.
• msg3 is not initialized via an attribute, and this isn't even possible. This value is set when constructing the controller and works fine.

It seems that AngularJS creates the scope and updates its value after the controller is created and the directive is linked into the DOM. Can anyone tell me the recommended way to do this?

Solution

You have to operate on the attributes themselves if you want to set defaults for '@' type binding. Read about $compile

You can do it in the compile function:

compile: function(element, attrs) {
    if (!attrs.msg1) attrs.msg1 = 'msg1';
    if (!attrs.msg2) attrs.msg2 = 'msg2';
}

http://jsfiddle.net/5kUQs/9/

OR you can use the link function as well.

link: function ($scope, $elt, attrs) {
    var action = function() {
        console.log('msg1:' + $scope.msg1 + ', msg2:' + $scope.msg2 + ', msg3: ' + $scope.msg3);
        if (!attrs.msg1) attrs.msg1 = 'msg1';
        if (!attrs.msg2) attrs.msg2 = 'msg2';
        if (!attrs.msg3) attrs.msg3 = 'msg3';                
    };
    action();
}

http://jsfiddle.net/5kUQs/13/

The reason for this is that there is a binding with the attribute setup which overrides your changes to that scope variable. We need to modify the attribute that the value is being taken from.

@ or @attr - bind a local scope property to the value of DOM attribute. The result is always a string since DOM attributes are strings

Comments

[Ramon de Klein]

That's what I tried at first, because I think controllers should control the scope (not the link function). The initialization of the controller is done even before it is being linked. The result is identical.