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＆amp; sau.html。

提前感谢您的帮助。

Answer 1

将对象引用（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 = ...;

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

Answer 2

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

试试这个：

-rw-------  1 odyssey odyssey  65G Feb 29 14:00 backup-2.29.2016_12-49-50_odyssey.tar.gz

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

2 个答案: