AngularJS binding does not work,when attribute is changed

Question

I have created a directive, which has an isolated-scope:

.directive('title',function(){
    return {
        restrict:'E',
        scope:{
            text:'@'
        },
        replace:true,
        template:'<div>{{text}}</div>',
        link:function(scope,iElement,iAttrs){
        }
    };
})

When I am trying to change "text" attribute by .attr method, the binding does not work. I have tried to use $apply method, but without any success.

What is wrong?

JSFiddle

PS: Pls, do not suggest any solution with using controller and binding the text attribute to $scope's properties(something like a <title text="{{somepropertyincontrollersscope}}">...). My problem is only related to changing the attribute externally.

James Allardice · Accepted Answer · 2014-04-03 09:03:56Z

1

I think you'll have to do it in the link function by watching the value of the attribute:

scope.$watch(function () {
    return iElement.attr("text");
}, function (newVal) {
    scope.text = newVal;
});

Here's an updated fiddle.

answered Apr 3, 2014 at 9:03

James Allardice

166k22 gold badges335 silver badges315 bronze badges

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

Collectives™ on Stack Overflow

AngularJS binding does not work,when attribute is changed

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