AngularJS $scope 在函数外无法访问

Question

我编写了以下代码来从输入字段中获取值并保存它。我定义了一个全局变量并将输出放入其中以在 app.factory 中使用。问题是 "x" 只能在 "update function" 内部读取，而在它外部的任何地方都是未定义的。我该如何解决这个问题？

var app = angular.module('bomApp', ['bomGraph']);

app.controller('bomController', ['$scope', 'appService', '$rootScope', function ($scope, appService, $rootScope) {
   
    var get = function () {
        appService.get().then(function (promise) {  

            $scope.graph = {
                
                options:  {
                    "hierarchicalLayout": {
                        "direction": "UD"
                        
                    },
                    "edges": {
                        "style":"arrow-center",
                        "color":"#c1c1c1"
                    },
                    "nodes": {
                        "shape":"oval",
                        "color":"#ccc"

                    }
                },
                
                data: {
                    nodes: promise.nodes,
                    edges: promise.edges
                }
            };
             
            
        });
        
    };
    
    $scope.newNode = {
        id: undefined,
        label: undefined,
        level: undefined,
        parent: undefined,
       
    };

    $scope.arrNode = {};
    $scope.update = function (nodes) {
        $scope.arrNode = angular.copy(nodes);
        $rootScope.x = angular.copy(nodes);
        
       
    };

   
    
    $scope.newEdge = {
        id: undefined,
        from: undefined, 
        to: undefined
       
    };
   
    $scope.arrEdge = {};
    $scope.updateE = function (edges) {
        $scope.arrEdge = angular.copy(edges);
        
    };
    
   
    get();
    

}]);



app.factory('appService', ['$q', '$http', '$rootScope', function ($q, $http, $rootScope) {
    console.log($rootScope.x);
    return {
        get: function (method, url) {
            var deferred = $q.defer();
            $http.get('data.json')
              .success(function (response) {
                  deferred.resolve(response);
                  
              })
            return deferred.promise;
           
        }, 
     
        
    };
    
}]);

Answer 1

在函数外声明 x:fiddle

<div ng-app="app">
    <div ng-controller="ctrl">
        <button ng-click="fn()">{{x}} click</button>
    </div>
</div>

JS

angular.module("app", [])
.controller("ctrl", function ($scope, $rootScope) {
    $scope.x = "hello";

    $scope.fn = function () {
        $scope.x = "world";
    }  
})

Answer 2

您可以创建全局 $scope 变量，$scope.x;

Answer 3

var x; 仅在控制器本地。进厂是进不去的。

大多数情况下，如果您想在 controllers 之间共享数据，您会将其存储在 service 中。在控制器中共享声明全局变量也是一种不好的做法

在您的例子中，实际上正在创建一个 closure，而 x 是一个 private 变量。它只能在控制器内访问。

如果你想在服务中访问变量x，那么使用$rootScope

示例：

app.controller('bomController', ['$scope', 'appService',  '$rootScope',function ($scope, appService,$rootScope) {

    $scope.update = function (nodes) {
       $scope.arrNode = angular.copy(nodes);
       $rootScope.x = angular.copy(nodes);
    };
});

为您服务：

app.factory('appService', ['$q', '$http', '$rootScope', function ($q, $http, $rootScope) {
      // you will have access to $rootScope.x
});

AngularJS $scope 在函数外无法访问

AngularJS $scope not accessible outside the function

javascript

angularjs

angularjs-scope