Question

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

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 $范围在函数外部无法访问

3 个答案: