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?

Bogdan Rybak · Accepted Answer · 2014-04-09 15:57:17Z

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

robert.bo.roth · Accepted Answer · 2014-04-09 15:23:04Z

0

You can try initializing your $scope attributes in the controller of the directive, rather than the linking function. When the controller is initialized, the scope should already be set.

answered Apr 9, 2014 at 15:23

robert.bo.roth

1,3534 gold badges15 silver badges24 bronze badges

1 Comment

Ramon de Klein Over a year ago

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.

Mel K. · Accepted Answer · 2017-06-27 05:31:45Z

0

I know this is an old one but I came across it looking for an answer and while I didn't get it, I did update your fiddle to get this example working.

function MyController($scope){
 var c = this;
 c.msg1 = $scope.msg1;
 c.msg2 = $scope.msg2;

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

 action();

};

answered Jun 27, 2017 at 5:31

Mel K.

3575 silver badges9 bronze badges

Collectives™ on Stack Overflow

AngularJS : Initializing isolated scope inside a directive

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related