在控制器之间共享对象不适用于 AngularJS 中的服务答案

【问题标题】：Sharing object between controllers doesn't work with a Service in AngularJS在控制器之间共享对象不适用于 AngularJS 中的服务
【发布时间】：2016-06-14 05:34:51
【问题描述】：

我有一个简单的应用程序，我想共享一个可以由控制器设置的对象，然后从另一个控制器访问它以完成任务，代码如下：

index.html

    <body ng-app="myApp">
        <ui-view></ui-view>
    <!-- All js files included and working -->
    <script type="text/javascript" src="angular/angular.min.js"></script>
    <script type="text/javascript" src="angular/angular-ui-router.min.js"></script>
    <script type="text/javascript" src="js/myApp.js"></script>
    <script type="text/javascript" src="js/farms.js"></script>
    </body>

app.js

var app = angular.module("myApp", ['ui.router']);

app.config(function config($stateProvider) {
    $stateProvider.state("farm", {
        url : "",
        controller : "myFarmController as FarmCtrl",
        templateUrl : "partials/farm.html"
    })
    $stateProvider.state("sau", {
        url : "/sau",
        controller : "mySauController as SauCtrl",
        templateUrl : "partials/sau.html"
    })
});

// Service used to share data
app.factory('Data', function(){
    return { farm: {idFarm:''} };
});

app.controller("mySauController", function($scope, $http, Data) {
    $scope.Data = Data;
}

农场.html

{{Data.farm}} <!-- this prints {"idFarm":5} -->
<div ui-sref="sau">GO TO SAU</div>

farms.js

app.controller("myFarmController", function($scope, $http, Data) {
$scope.Data = {"farm":{"idFarm":5}};
}

sau.html：

{{Data.farm}} <!-- this prints {"idFarm":""} -->

当我转到farm.html时，我看到该对象显示为{"idFarm":5}，但是当我点击我定义的GO TO SAU时，它会加载sau.html，但我得到一个空对象{"idFarm":""}，因为它是在工厂中定义的，所以两个控制器或两个部分之间没有数据传递，farm.html & sau.html。

提前感谢您的帮助。

【问题讨论】：

标签： html angularjs data-binding scope angular-services

【解决方案1】：

在 myFarmController 中，您不会在代码中使用该服务。

试试这个：

app.controller("myFarmController", function($scope, $http, Data) {
  Data.farm.idFarm = 5;
  $scope.Data = Data;
}

【讨论】：

【解决方案2】：

将对象引用（Data 服务）分配给范围属性的要点是它在所有持有它的范围属性之间共享。

你在这里的本质是做什么

app.controller("myFarmController", function($scope, $http, Data) {
$scope.Data = {"farm":{"idFarm":5}};
}

正在为$scope.Data 分配一个新对象，它与原始Data 对象无关。你应该永远坚持

$scope.Data = Data;
Data.farm = ...;
// or $scope.Data.farm = ...;

在作用域之间共享对象的模式。

【讨论】：

我现在明白了，非常感谢您的帮助，我希望我也可以将此标记为答案。