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

Angularjs - Updating multiple instances of the same controller

本文关键字：实例 控制器 更新 Angularjs      更新时间：2023-09-26

我的问题：我的站点中有多个控制器实例。当我更新"x"时，只有当前实例/div 会更新。

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

.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 的视图？

这很容易。

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

假设工厂 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。

从 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);
    });
});
相关文章：