AngularJS - Updating a variable in custom directive

Question

I have declared a variable in parent scope in one of my controllers.

$scope.myValue = true;

This value is fetched in the custom directive easily. But when the value is updated in the parent controller it is not reflected in the custom directive.

My question is how can we let the directive know that the "myValue" is changed?

If the info is not suffice kindly let me know.

create a service, add this variable to that service, inject this service into controller as well as directive and there you go — Manish Kr. Shukla
– Manish Kr. Shukla, Commented Mar 31, 2015 at 10:56
@SergiuParaschiv tried $watch. But it is called only once. ie., when view is loaded. — Riyaz Ahamed
– Riyaz Ahamed, Commented Mar 31, 2015 at 10:58
Then it probably means you are overwriting the reference you are $watching or are not $applying (through some built-in AngularJS directive like ng-click or manually) when you change it in the parent scope. — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Mar 31, 2015 at 11:04

Sam · Accepted Answer · 2015-03-31 11:01:10Z

1

In your parent controller, upon changing the value of the variable, you can broadcast an event like this -

$scope.$broadcast('valueChanged', {
     val: $scope.myValue // pass in any object you want
});

And then in your child controllers, handle it like -

$scope.$on('valueChanged', function (event, data) {
     console.log(data); // get the same object here
});

$broadcast fires the event down, so this should work in your case.

answered Mar 31, 2015 at 11:01

Sam

4,55412 gold badges44 silver badges75 bronze badges

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

Comments

Tai Huynh · Accepted Answer · 2015-03-31 11:19:09Z

1

You can watch the value inside the directive, like this:

app.directive('directive', function() {
    return {
        scope: true,
        link: function($scope){
            $scope.$watch('$parent.myValue', function(newVal){
                console.log(newVal);
            });
        }
    };
});

Link demo: https://jsfiddle.net/mzrja04L/

edited Mar 31, 2015 at 11:19

answered Mar 31, 2015 at 11:05

Tai Huynh

6094 silver badges8 bronze badges

Collectives™ on Stack Overflow

AngularJS - Updating a variable in custom directive

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related