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

我选择angular并面临一个问题：我有一个SPA，它包含两个带有控制器的部分，数据从json文件返回。第一个用于显示菜单，第二个用于添加新项目。现在在json文件中有两个对象，但当我在第二个控制器中添加第三项时，当我返回第一页时，它就消失了。我怎样才能修好它？我读过，工厂可以在控制器之间传输数据，但我从未使用过

角度模块：

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"
}]

---

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

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

下面是JSFIDLE代码：

---

有关角度服务的更多信息，请参见Daniel.v所说的“服务是最好的方式”。 还有两种不那么优雅的选择：

• “如果数据由两个控制器所有，则这些控制器应共享$parent，并且它应是数据的所有者！”
• “嘿，我们为什么不使用事件和侦听器呢？让我们使用$broadcast和$emit！”

但我更喜欢服务

使用服务

用户$broadcast或$emit

使用$rootScope（不推荐）

---

这将对您有用：

`

var-app=angular.module（'myApp'，[]）；
app.controller（'myCtrl'，函数（$scope，$http）{
函数sendData（$scope）{
var arrayData=[1,2,3]；
$scope.$emit（'someEvent'，arrayData）；
}
});
app.controller（'yourCtrl'，函数（$scope，$http）{
$scope.$on（'someEvent'，函数（事件，数据）{
控制台日志（数据）；
}); 
});

`

可能存在的副本

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