Question

我想在控制器之间共享数据：

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.factory('Data', function(){
    return {show: true, text: "Hello"};
});

myApp.controller('ctrl1', ['$scope', 'Data', function($scope, Data) {
    $scope.data = Data;
}]);

myApp.controller('ctrl2', ['$scope', 'Data', function($scope, Data) {
    $scope.click = function(){
      Data = {text:"Hello2", show:true};
    }
}]);
</script>
<body ng-app='myApp'>
<div style="background-color:red;margin-top:30px;" ng-controller="ctrl1">
    {{data.text}}
</div> 
<div style="background-color:yellow;margin-top:30px;" ng-click="click()" ng-controller="ctrl2">
    Click to change data
</div> 
</body>

演示http://plnkr.co/edit/QHuWLYjBqDvl20fL7eeu?p=preview。如果我写

，这不起作用

Data.text = 'Hello2';
Data.show = true;

完美无缺。演示http://plnkr.co/edit/xKtLUlBu0dQPUsiNCRyC?p=preview

仅通过指定Json更新模型非常方便，我该怎么做？

Answer 1

通过执行Data = {text:"Hello2", show:true};，您将完全覆盖初始Data对象，从而导致损坏的引用。这就是为什么你不能分配全新的对象的原因。但是你可以这样做：

myApp.factory('Data', function(){
    return {
        prop: {show: true, text: "Hello"}
    };
});

以后：

Data.prop = {text: "Hello2", show: true};

Answer 2

写作时

Data = {text:"Hello2", show:true};

您正在使用新的本地对象

覆盖本地Data变量

写作时

Data.text = 'Hello2';
Data.show = true;

在父作用域中也链接的原始对象仍然存在，您将覆盖Data对象内的变量，而不是仅覆盖对象的本地Data链接

使用工厂，AngularJS与控制器之间共享数据

2 个答案: