Angular:是否可以在范围之间共享数据?

时间:2017-06-25 16:26:31

标签: javascript angularjs

我的问题是我是否可以共享范围,例如

我有一个功能

 $scope.init = function(){
        $http({
            url: url_for('account/getinfo'),
            method: "POST",
            data: fields
        }).success(function (data, status, headers, config) {


                $scope.locations = data.stores;


                $scope.currentLocation = data.stores.filter(function(store){

                    return store.mpos_id == $scope.mposid;
                });

                if ($scope.currentLocation.length > 0) {
                    $scope.currentLocation = $scope.currentLocation[0];
                }


            }).error(function (data, status, headers, config) {
            });


    };

$ scope.currentLocation是一个Object!  我可以在其他函数中使用这个obj数据吗?

尝试使用angular.copy并扩展,但没有成功

$scope.getInfo = function(){
  $scope.currentLocationData = angular.copy($scope.currentLocation);
}

4 个答案:

答案 0 :(得分:2)

Angular中的服务是单例,因此您可以将这些数据存储在服务中,并将其注入您需要的任何位置。将数据请求分成服务已经被认为是最佳实践,因此您无论如何都要创建服务。

以下是一个例子:

首先将数据检索逻辑分离为服务。

inserting any amount of async behaviour is making it time out at the 10 sec threshold

然后创建一个帐户服务以在控制器/组件之间共享检索到的数据:

sync: true

现在你需要在你的控制器中做的就是注入angular.module('app').service('accountDataService', AccountDataService); function AccountDataService($http){ var service = this; service.getInfo = function(fields){ return $http.post(url_for('account/getinfo'), fields) .then(function(response){ return response.data.stores; }); } }

angular.module('app').service('accountService', AccountService);

function AccountService(accountDataService){
    var service = this;

    service.currentLocation = {};
    service.locations = [];

    service.init = function(fields, mposid){ 

        accountDataService.getInfo(fields).then(function(stores){
            service.locations = stores;

            var currentLocations = stores.filter(function(store){
                return store.mpos_id == mposid;
            });

            if (currentLocations.length > 0) {
                service.currentLocation = currentLocations[0];
            }
        });
    }
}

仅在accountService内运行angular.module('app').run(function(accountService){ accountService.init({ /* your fields */ }, '[your mposid]'); }); angular.module('app').controller('myController', MyController); function MyController($scope, accountService){ $scope.currentLocation = accountService.currentLocation; } 功能就是例如。你最好在路由解析函数或类似的东西中运行它,因为init函数的异步性质。

奖金记录

避免使用init将变量传递给视图。请改用run(..)语法。您可以查看文档以获取有关其工作原理的更多信息,或建议您check out the angular 1.x style guide from John Papa

答案 1 :(得分:1)

你肯定可以复制我会工作的东西。你可以在下面的例子中查看。

	<!DOCTYPE html>
	<html>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
	<body>

	<div ng-app ="app" ng-controller ="ctrl">
				
{{currentLocationData}}

				</div>
	<script>
	angular.module('app', []).controller('ctrl', function($scope){
    
	
	$scope.currentLocation = 'testing angular copy';
    $scope.currentLocationData = angular.copy($scope.currentLocation);
   
 
})

	</script> 

	</body>
	</html>

答案 2 :(得分:1)

如果您希望在两个控制器/指令之间共享数据,那么您应该使用服务并将其注入控制器/指令。

如果您只想创建/克隆对象的新副本,那么您可以使用JSON.parse(JSON.stringify($scope.currentLocation))

希望这有帮助!

答案 3 :(得分:1)

当且仅当该范围是未与前一个范围隔离的子级时,才能访问另一个范围内的该对象。在这种情况下,您的子范围也将继承父范围的所有属性。

因此,如果该代码是控制器的范围,并且您有另一个控制器作为该控制器的子级,则子级可以访问该属性。

虽然它有效,但很多时候使用AngularJS开发内容并不是最好的做法。它将强制两个控制器之间的依赖关系,如果您将更改您的代码,您可能会丢失继承并破坏您的代码。

在这些情况下,最佳解决方案是定义一个包含currentLocation值的服务。然后在需要访问此值的任何位置注入此服务。

我希望它有意义