在复杂的AngularJS应用中使对象全局可访问和可操作的最好方法

Best way to make object globally accessible and manipulable in complex AngularJS app?

本文关键字：访问 可操作 方法 对象 AngularJS 复杂 应用 全局      更新时间：2023-09-26

首先，如果这个问题是重复的，我很抱歉(我知道它看起来很像一个问题)，但我有一些特定的要求，我不确定其他解决方案是否能满足这些要求。他们可能是，但我一点也不确定。

我正在使用AngularJS构建一个HTML5+CSS3+JS web应用程序，使用node webkit部署为桌面应用程序。这款应用程序可以运行一项竞技赛事，随着比赛的进行，按积分对球队和竞争者进行排序，以及其他一些任务。

应用程序将有多个组件，都需要能够访问和编辑比赛，以及本地存储比赛(可能作为JSON对象)。

目前，我计划将锦标赛创建为单个对象，其他对象(团队，竞争对手，裁判)嵌套在其中。什么是最好的方式来创建这个比赛，以满足我的要求?

我还需要能够在以后的应用中添加新部件，并轻松地赋予这些组件相同的能力(查看和更新比赛对象)。

多谢!

设置一个工厂/服务，并从那里返回锦标赛对象，或者使用它的方法。然后，您可以将该服务注入到您希望访问它的任何控制器中。你也可以定义引用锦标赛对象的作用域变量，使它可以从你的应用指令中访问。

我曾经将所有全局变量移动到$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
         }
     }
 }]);
相关文章：