在 AngularJs 中共享数据

Question

如何将数据共享给所有控制器？

我有一个控制器可以从服务器 (file.json) 中提取数据，我想将其共享给其他控制器

sampleApp.controller('PhoneListCtrl', 
['$scope', '$http', 
function($scope, $http) {
    $http.get('App_Data/phonelist.json').
        success(function(returnDataFrmJson){
            $scope.phonesScope = returnDataFrmJson;
        });
}]);

将访问第一个共享数据的控制器

sampleApp.controller('AddIPhoneController', 
['$scope', '$http',
function($scope, $http) { 
    $scope.newInput= 'sample text';

    $scope.sharedText= dataFromSharedControll;
}]);

将显示数据的 html 文件。

{{newInput}} {{sharedText}}

Answer 1

如果我正确理解你的问题，你可以创建一个服务并将其注入其他控制器，如下所示：

    sampleApp.service('sharedProperties', function() {
        var sharedText = '';
        return {
            getSharedText: function() {
                return sharedText;
            },
            setSharedText: function(newText) {
                sharedText = newText;
            }
        }
    }

然后在你的控制器中：

    sampleApp.controller('ControllerName', ['sharedProperties', function(sharedPropertied) {
        var text = sharedProperties.getSharedText();
    }]);

显然，您应该通过注入服务并将其设置在另一个控制器中来在某处设置文本。

Answer 2

您应该通过服务共享数据。此外，控制器中的 $http 调用应移至服务。如果您随后在控制器中注入服务，则可以从控制器中的该服务调用 methods/data。

我建议您看一下 John Papa 的风格指南：https://github.com/angular/angular

Answer 3

你做错了，你想在控制器之间共享的数据应该存在于服务中而不是控制器中

服务：

 sampleApp.service("MyService",function($http){
       this.phoneList = function(){
             return $http.get('App_Data/phonelist.json');
       };         
 });

控制器 1：

  sampleApp.controller('PhoneListCtrl1',function($scope,MyService) {
        MyService.phoneList()
           .then(function(list){
                 $scope.phoneList = list;
            });
    });

控制器 2：

 sampleApp.controller('PhoneListCtrl2',function($scope,MyService) {
            MyService.phoneList()
               .then(function(list){
                     $scope.phoneList = list;
                });
    });

Answer 4

尝试$rootScope.phonesScope。这可能会有所帮助。 understand rootscope

Answer 5

好吧，有多种选择供您选择： $sessionStorage、localStorage、appConstant、$localStorage 等等。

您甚至可以使用 Factory 和 Services 在控制器之间共享数据。我会给你一个使用 $sessionStorage.

的简单例子

为了使用$sessionStorage或$localStorage，您需要注入ngStorage。

首先在您的 index.html 中包含来源：

<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>

然后在你的模块定义中，注入 ngStorage:

var sampleApp = angular.module('Your App Name', ['ngStorage']);

而且，在你的 controllers:

sampleApp.controller('PhoneListCtrl', 
['$scope', '$http', '$sessionStorage',
function($scope, $http,$sessionStorage) {
    $http.get('App_Data/phonelist.json').
        success(function(returnDataFrmJson){
            $scope.phonesScope = returnDataFrmJson;
            $sessionStorage.sharedValue = returnDataFrmJson;//keeping the value in session
        });
}]);

controller 将访问第一个

的共享数据

sampleApp.controller('AddIPhoneController', 
['$scope', '$http','$sessionStorage',
function($scope, $http,$sessionStorage) { 
    $scope.newInput= 'sample text';

    $scope.sharedText= $sessionStorage.sharedValue;
}]);

然后在你的View中：

{{newInput}}{{sharedText}}

Answer 6

这取决于要求：

如果您的目的是在没有权限的情况下在控制器之间共享数据当数据为 populated/updated 时通知控制器，去使用 service/factory 方法。
如果您还想通知其他控制器 populating/updating 数据然后你可以利用 angular 事件（$broadcast/$emit）。
并且如果您想在页面刷新或浏览器上保留数据关闭，您可以选择 session/local 存储。

在 AngularJs 中共享数据

Share Data in AngularJs

service

factory

controllers

angularjs