AngularJs directive compile function and isolated scope

Question

My problem is demonstrated in the below plnkr

  <ntimes repeat=10 >
      <h1>Hello World - 10 {{smsg}}</h1>
      <h4>More text</h4>
    </ntimes>

Directive :

directive('ntimes', function() {
return {
    restrict: 'E',
    scope:{
      smsg: '='
    },
    compile: function(tElement, attrs) {
        var content = tElement.children();
        for (var i = 0; i < attrs.repeat - 1; i++) {
            tElement.append(content.clone());
        }
        tElement.replaceWith(tElement.children());

        return function(scope,elem,attr){
          scope.smsg='abc';
        }
    }
}
})

I have a compile function returning link function, and the directive scope is isolated. When I update scope variable in the link function, the page is not rendering the updated value. I am expecting to see abc instead of xyz.

Please help

DB.Null · Accepted Answer · 2016-06-12 00:39:27Z

0

When using two-way-data-binding you have to make sure the variables are connected properly.

This means that in your directive you declare that the smsg scope variable will be two-way-data-binded with something else which will be declared in the DOM.

Now looking at the DOM this "link" is missing which provides you this error.To fix it you have to change your html to this <ntimes smsg="smsg" repeat=10 >

And when you do your new smsg will be equal to 'abc'.

answered Jun 12, 2016 at 0:39

DB.Null

1,2048 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJs directive compile function and isolated scope

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related