Question

我的问题：我的网站中有多个控制器实例。当我更新＆＃39; x＆＃39;时，只更新当前的实例/ div。

JSFiddle： http://jsfiddle.net/evgahe2u/（简化示例，每个ng-controller都在自己的视图中。）

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';
});

我的问题：如何在更新View1.html的X值时如此，它会更新view2.html的视图？

Answer 1

这很简单。

据我所知，最好的方法是创建一个工厂。

让我们说工厂X，让我们为两个视图创建两个控制器：

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'
  };
});

完整示例：JSFiddle

现在，如果X被更新，由于对象的属性，它将在两个控制器中更新。两个范围内的两个x都是相同的x。

Answer 2

从rootScope广播

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

然后在控制器中使用$ on处理它。

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);
    });

});

Angularjs - 更新同一控制器的多个实例

2 个答案: