与工厂AngularJS在控制器之间共享数据

Sharing data with between Controllers with a Factory, AngularJS

本文关键字：之间 共享 数据 控制器 工厂 AngularJS      更新时间：2023-09-26

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

<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>

Demohttp://plnkr.co/edit/QHuWLYjBqDvl20fL7eeu?p=preview。但是，如果我写，这就不起作用

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

它工作得很好。Demohttp://plnkr.co/edit/xKtLUlBu0dQPUsiNCRyC?p=preview

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

通过执行Data = {text:"Hello2", show:true};，您完全覆盖了初始Data对象，这将导致引用中断。这就是为什么不能只指定一个全新的对象。然而，你可以这样做：

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

以及更高版本：

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

当您编写时

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

您正在用新的本地对象覆盖本地Data变量

写入时

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

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

相关文章：