CODEWITHSUNDEEP
javascriptangularjs
Joe
Joe

Reputation: 4234

Change a scope value in directive

Whats the best way to assign a new value through a directive? A two way databinding.

I have a fiddle here where i tried. http://jsfiddle.net/user1572526/grLfD/2/ . But it dosen't work.

My directive: 

myApp.directive('highlighter', function () {
    return {
        restrict: 'A',
        replace: true,
               scope: {
                    activeInput: '='
                },
        link: function (scope, element, attrs) {
            element.bind('click', function () {
                scope.activeInput = attrs.setInput 
            })
        }
    }
});

And my controller:

function MyCtrl($scope) {
             $scope.active = {
                value : true
            };
}

And my view: 

<h1 highlighter active-input="active.value" set-input="false">Click me to update Value in scope: {{active}}</h1>

So what i wanna do is update the scope.active with the given attribute setInput.

Any ideas what I'm doing wrong here?

Upvotes: 0

Views: 62

Answers (1)

Stewie
Stewie

Reputation: 60406

With element.bind you leave the realm of Angular, so you need to tell Angular that something had happened. You do that with the scope.$apply function:

scope.$apply(function(){
  scope.activeInput = attrs.setInput;
});

here is an updated jsfiddle.

Upvotes: 2

Related Questions