AngularJS$作用域在函数之外不可访问

AngularJS $scope not accessible outside the function

本文关键字：访问 函数 作用域 AngularJS      更新时间：2023-09-26

我已经编写了以下代码来从输入字段中获取值并保存它。我定义了一个全局变量，并将输出放在其中以在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;
           
        }, 
     
        
    };
    
}]);

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

您可以创建一个全局$scope变量$scope.x；

在函数外声明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";
    }  
})
相关文章：