在复杂的 AngularJS 应用程序中使对象全局可访问和可操作的最佳方法？答案

【问题标题】：Best way to make object globally accessible and manipulable in complex AngularJS app?在复杂的 AngularJS 应用程序中使对象全局可访问和可操作的最佳方法？
【发布时间】：2015-05-30 22:59:40
【问题描述】：

首先，如果这个问题是重复的，我深表歉意（我知道它看起来像一个可疑的问题），但我有一些具体要求，我不确定其他解决方案是否能满足这些要求。他们可能是，但我完全不确定。

我正在使用 AngularJS 构建一个 HTML5+CSS3+JS 网络应用程序，以使用 node webkit 部署为桌面应用程序。该应用程序将支持竞赛活动的运行，在锦标赛进行时按分数对团队和竞争对手进行排序，以及其他几项任务。

该应用程序将包含多个组件，所有组件都需要能够访问和编辑锦标赛，以及在本地存储锦标赛（可能作为 JSON 对象）。

目前我正计划将锦标赛创建为单个对象，其他对象（团队、竞争对手、裁判）嵌套在其中。以满足我要求的方式创建此锦标赛的最佳方式是什么？

我还需要能够在以后向应用程序添加新部件，并轻松地为这些组件提供相同的功能（查看和更新锦标赛对象）。

非常感谢！

【问题讨论】：

标签： javascript angularjs oop object global-variables

【解决方案1】：

设置工厂/服务并从那里返回锦标赛对象，或使用它的方法。然后，您可以将服务注入您想要访问它的任何控制器中。您还可以定义引用锦标赛对象的范围变量，以使其可以从您的应用程序指令中访问。

【讨论】：

【解决方案2】：

我曾经将所有的全局变量移动到$ootScope。但最好不要堵塞它，您可以使用单个对象来达到目的。

angular.module('sampleApp', [])
    .config(['$compileProvider', function ($compileProvider) {
        $compileProvider.debugInfoEnabled(false);
    }])
    .run(['$rootScope', function ($rootScope) {
        $rootScope.globalVars = {};
    }])
.controller('mainController', ['$scope', '$rootScope', function ($scope, $rootScope) {

    $rootScope.globalVars.name = "Batman";
}])
 .directive('plugin', ['$compile,$rootScope', function ($compile, $rootScope) {
     return {
         restrict: 'A',
         link: function (scope, $element, attrs) {
             console.log($rootScope.globalVars.name); //Batman
         }
     }
 }]);

【讨论】：