Angularjs - Updating multiple instances of the same controller

Question

My problem: I have multiple instances a controller in my site. When I update 'x', only the current instance/div gets updated.

JSFiddle: http://jsfiddle.net/evgahe2u/ (simplified example, each ng-controller is in its own view.)

HTML

<!-- this is a simplified example -->
<div ng-app="myApp">
       <!-- this is in view1.html -->
        <div ng-controller="myController">
                <input type="text" ng-model="x" /> {{x}}
        </div>
        <!-- this is in view2.html -->
        <div ng-controller="myController">
                <input type="text" ng-model="x" /> {{x}}
        </div>
</div>

JS

var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope) {
    $scope.x = 'test';
});

My question: How can I have it so when I update View1.html's X value, it will then update view2.html's view?

Fostah · Accepted Answer · 2014-11-12 21:48:12Z

3

That's pretty easy.

According to me the best way to do this is to create a factory.

Let's say factory X and let's create two controllers for both views:

myApp.controller('1Ctrl', function($scope, x) {
  $scope.x = x.x;
});

myApp.controller('2Ctrl', function($scope, x) {
  $scope.x = x.x;
});

myApp.factory('x', function() {
  return {
    x: 'value'
  };
});

Full Example: JSFiddle

Now if X is updated it will update in both controllers, because of the properties of an object. Both x'es on both scopes are the same x.

edited Nov 12, 2014 at 21:48

Fostah

2,9464 gold badges56 silver badges80 bronze badges

answered Nov 12, 2014 at 20:07

Pepijn

1,2041 gold badge11 silver badges25 bronze badges

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

4 Comments

SoluableNonagon Over a year ago

using a service is a good idea as well, personally, I thought broadcast was the way to go

Pepijn Over a year ago

i think broadcast makes your code confusing, its easier to reproduce a factory in other controllers as well, than to plug broadcast and $on events everywhere

SoluableNonagon Over a year ago

either way, both approaches work, I like yours as it's more reusable. but I like mine as it's a simple event you can capture in any controller and quite easy to understand, and you don't need to create a service just to share data.

Fostah Over a year ago

@ZackArgyle That looks like the way to handle it. Thanks EliteOctagon and Pepijn. I will re-architect my controller now.

SoluableNonagon · Accepted Answer · 2014-11-12 20:11:01Z

1

Broadcast from rootScope

$rootScope.$broadcast("changeXevent", dataToSend);

then handle it with an $on in the controller.

myApp.controller('myController', function($scope, $rootScope) { // inject rootscope
    $scope.x = 'test';

    // watch for event
    $scope.$on('changeXevent', function(event, data){
         $scope.x = data;
    });

    // watch for changes on x
    $scope.$watch('x', function(newValue, oldValue){
        if(newVal !== oldVal)
            $rootScope.$broadcast('changeXevent', $scope.x);
    });

});

edited Nov 12, 2014 at 20:11

answered Nov 12, 2014 at 20:05

SoluableNonagon

11.8k11 gold badges59 silver badges100 bronze badges

4 Comments

SoluableNonagon Over a year ago

I'll elaborate a little more.

Fostah Over a year ago

Ah that makes sense. I thought the controllers were in the same scope. But it looks like they don't share scope at all.

Pepijn Over a year ago

They don't share a scope indeed, but i would advise against using the same controller twice on a page, maybe it's better to look at a directive where you can share scopes.

SoluableNonagon Over a year ago

No they do not share scope, and i think @Pepijn makes a point about not working, but you can account for that by doing value checks.

Collectives™ on Stack Overflow

Angularjs - Updating multiple instances of the same controller

2 Answers 2

4 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related