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

Question

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

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

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

提前感谢您的帮助。

Answer 1

在 myFarmController 中，您没有在代码中使用该服务。

试试这个：

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

Answer 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 = ...;

在范围之间共享对象的模式。

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

Sharing object between controllers doesn't work with a Service in AngularJS

html

data-binding

scope

angularjs

angular-services