3

I've a main controller and into it two other controllers:

<div ng-controller="mainController" ng-model="value">
    <div ng-controller="otherController"></diV>
    <div ng-controller="anOtherController"></div>
</div>

Thanks to the controller inheritance my otherController can update my value I bind with the ng-model diretive.

But how can I notice my anOtherController that the value have changed in order to execute a function owned by anOtherController?

Can I register a function to this value?

Fractaliste
  • 5,777
  • 11
  • 42
  • 86

3 Answers3

11

You can do this in your controller..

$scope.$watch("value",function(newValue,oldValue){
 // your code goes here...
});

It will basically watch for any changes on a given "scope property". However, my advice is to use a either a service or a factory.

Please refer to this other SO Discussion:

AngularJS Service Passing Data Between Controllers

Community
  • 1
  • 1
Dalorzo
  • 19,834
  • 7
  • 55
  • 102
5

Send a message to the other scopes:

$scope.$broadcast('messagename', params);

To catch it:

$scope.$on('messagename', function(params){
    alert('something happend');
});

The scope inherits downwards; if you want the message to be sent to all scopes, use $rootScope.$broadcast.

Or you can simply add a watcher.

Toby Speight
  • 27,591
  • 48
  • 66
  • 103
thsorens
  • 1,308
  • 12
  • 21
0

You need to be careful here:

mainController will have a scope.value

otherController and anOtherController won't have a scope.value defined, although if you try to access scope.value it will work since they are children of mainController so it will transverse the prototype chain to find that property. However, when you assign a value into scope.value in otherController/anOtherController , you are defining a local version of that variable in your scope and it will differ from the other controllers.

If you genuinely want to modify the same element for the three elements you will need to assign new values to the parent scope property in the children controllers.

For example:

if scope.value was equal to "old" in maincontroller:

in otherController:

$scope.$parent.value = "new"

in anOtherController or mainController: 

console.log($scope.value) // "new"

But if you do:

in otherController:

$scope.value = "new"

in anOtherController or mainController: 

console.log($scope.value) // "old"

Now, knowing all this and answering your question if you want to execute a function everytime scope.value changes in anOtherController and you are not going to modify that property in that scope you can get away with:

Inside anOtherController:

$scope.watch('value', function(newVal, oldVal) {
  myfunc();
}

But you need to make sure that you don't assign values to $scope.value instead assign them to $scope.$parent.value.

Wawy
  • 6,259
  • 2
  • 23
  • 23
  • Actually I defined a function (`$scope.updateValue()`) in my mainController which updates the scope at the lowest level as possible. And then I can call this function from my child but also from grandchildren, ... It should be okay? – Fractaliste Apr 15 '14 at 15:03
  • Hmm, what do you mean at the lowest level? – Wawy Apr 15 '14 at 15:17