Question

我倾向于角色并面临一个问题：我有一个SPA，其中包含两个带控制器的部分，数据从json文件返回。显示菜单的第一个控制器，第二个 - 用于添加新项目。现在在json文件中有两个对象，但是当我在第二个控制器中添加第三个项目时，当我返回第一页时它消失了。我该如何解决？我已经读过工厂可以在控制器之间传输数据，但我从来没有使用它。

Angular模块：

var myApp = angular.module("testModule", ['ngRoute']);

myApp.config(function ($routeProvider){
    $routeProvider.when('/', {
        templateUrl: 'pages/main.html',
        controller: 'mainCtrl'
    })
    .when('/add', {
        templateUrl: 'pages/add.html',
        controller: 'addCtrl'
    })
})



myApp.controller("mainCtrl", function ($scope, $http) {
            $http.get("model/data.json").success(function (response) {
                $scope.list = response;
            })                  

    });

myApp.controller("addCtrl", function ($scope, $http) {

            $scope.addAdv = function(newAdv){
                $http.get("model/data.json").success(function (response) {
                    response.push({
                        name: newAdv.name,
                        shop: newAdv.shop 
                    });
            })
        }; 
    });

JSON文件：

[{
    "name": "New Item",
    "shop": "Titan"
},
{
    "name": "New Item1",
    "shop": "Titan"
}]

Answer 1

您可以使用角度服务在控制器之间共享数据。您应首先创建服务以从服务器获取信息

var app = angular.module('app', ['ngRoute']);
app.service('dataService', function($http) {
  var data = {};
    data.list = [];
  var getData = function(){
    $http.get("model/data.json").then(function (response) {
      data.list = response.data;
    },function(err){});

  }
    return {
        getDataFromServer:getData,
        getData:data,

    }
});

现在您可以在控制器中使用此服务：

app.controller("mainCtrl", function ($scope, dataService) {
       dataService.getDataFromServer();      

});

app.controller("addCtrl", function ($scope, dataService) {
    $scope.data = dataService.getData;
    $scope.data.list.push({
        name:"foo",
        shop:"bar"
    });
});

这里是jsfiddle代码： https://jsfiddle.net/xqn5yu8g/

有关角度服务的更多信息，请查看angularjs services document page

Answer 2

Daniel.v说，服务是最好的方式。还有两个不太优雅的选择：

＆＃34;如果数据由两个控制器拥有，则这些控制器应该共享一个$ parent;它应该是数据的所有者！＆＃34;
＆＃34;嘿，为什么我们不使用活动和听众？我们选择$ broadcast和$ emit！＆＃34;

但我主要更喜欢服务。

Answer 3

使用服务
user $ broadcast或$ emit
使用$ rootScope（不推荐）

Answer 4

这对你有用：

`

<div ng-app="myApp" ng-controller="myCtrl"> 

    <button ng-click="sendData();"></button>

</div>


<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
        function sendData($scope) {
            var arrayData = [1,2,3];
            $scope.$emit('someEvent', arrayData);
        }

    });
    app.controller('yourCtrl', function($scope, $http) {
        $scope.$on('someEvent', function(event, data) {
            console.log(data); 
        }); 
    });
</script>

`

如何在控制器之间传输数据

4 个答案: