Question

我在$ scope命名空间（$ scope.name）中有一个名为“name”的变量。

我从不同的控制器和不同的模块修改了这个变量。代码如下：

var myApp = angular.module('myApp',['myModule', 'anotherModule']);

var myModule = angular.module('myModule', []);

myModule.controller( 'MyCtrl', [ '$scope', function($scope) {
    $scope.name = 'Superhero';
    console.log("My module");
} ]);

myModule.controller( 'MyCtrl2', [ '$scope', function($scope){
    $scope.name = 'Another hero';
}]);

var anotherModule = angular.module('anotherModule', []);

anotherModule.controller( 'AnotherCtrl', [ '$scope', function($scope){
     $scope.name = 'Hero';
     console.log("Another Module");
}]);

我希望所有变量都能同步到同一个变量。但是，每个“name”变量在不同的控制器上具有不同的值。

为什么呢？以及如何使所有相同的变量同步？

这是JSFiddle：http://jsfiddle.net/yaprak/3Bc7f/1/

Answer 1

这是因为它们位于不同的范围内。要将$ scope.name同步到相同的值，您需要创建一个包含该值的服务。

默认情况下，控制器不能共享数据，但控制器和服务可以共享。

更新

我更新了你的小提琴

http://jsfiddle.net/3Bc7f/6/

var myApp = angular.module('myApp',['myModule', 'anotherModule']);

var myModule = angular.module('myModule', ['myFactory']);

myModule.controller( 'MyCtrl', [ '$scope', 'data', function($scope, data) {
    $scope.name = data.name;
    console.log(data.name);
} ]);

myModule.controller( 'MyCtrl2', [ '$scope', 'data', function($scope, data) {
    $scope.name = data.name;
    console.log(data.name);
}]);

var anotherModule = angular.module('anotherModule', []);

anotherModule.controller( 'AnotherCtrl', [ '$scope', 'data', function($scope, data) {
    $scope.name = data.name;
    console.log(data.name);
}]);

angular.module('myFactory', [])

    .factory('data',[ function() {

        return {
            'name': 'John Doe'
        };

    }])

;

Answer 2

您应该使用具有双向绑定数据的服务

var storage = { name : 'Tolya'}

myApp.service('srv', function() {
    return storage;
})

http://jsfiddle.net/molo4nik11/3Bc7f/2/

Answer 3

您可以使用$ rootScope而不是$ scope。现在所有名称的范围都有英雄。

var myApp = angular.module('myApp',['myModule', 'anotherModule']);

var myModule = angular.module('myModule', []);

myModule.controller( 'MyCtrl', [ '$rootScope', function($rootScope) {
    $rootScope.name = 'Superhero';
    console.log("My module");
} ]);

myModule.controller( 'MyCtrl2', [ '$rootScope', function($rootScope){
    $rootScope.name = 'Another hero';
}]);

var anotherModule = angular.module('anotherModule', []);

anotherModule.controller( 'AnotherCtrl', [ '$rootScope', function($rootScope){
     $rootScope.name = 'Hero';
     console.log("Another Module");
}]);

更改不同模块中的范围变量

3 个答案:

更新