Question

在我的AngularJS项目中，我有一个包含一些数据的全局变量：域名和图像目录。我在一些视图中需要这个变量。以下是变量的外观以及设置方式：

config.js

(function(){
  'use strict';
   var conf = angular.module('stormforsStats.config', ['ngRoute']);

   //SET GENERAL VARIABLES
   conf.value('SERVER_DATA', {
     'BASE_URL': '/',
     'IMG_URL': 'assets/src',
     'API_URL': '../api/'
   });
   conf.value('APP_DATA', {
     'APP_NAME': 'Stormfors Stats',
     'APP_VERSION': '0.1'
   });

   conf.config(['$routeProvider', function($routeProvider) {
      $routeProvider.when('/', {
          templateUrl: 'index.html',
          controller: 'ConfCtrl'
      }).otherwise({
          redirectTo: '/'
      });
   }]);

   conf.controller('ConfCtrl', ['$log', '$location', 'SERVER_DATA', function ConfCtrl($log, $location, SERVER_DATA) {
        SERVER_DATA.BASE_URL = $location.absUrl().substring(0, $location.absUrl().length - $location.url().length).replace("#","");
        SERVER_DATA.IMG_URL = SERVER_DATA.BASE_URL + SERVER_DATA.IMG_URL;
   }]);
})();

我已成功将全局变量注入我的其他模块中，如下所示：的 header.js

(function(){
  'use strict';
  var header = angular.module('stormforsStats.header', []);

  header.directive("headerBar", [function(){
    return {
      restrict: "E",
      templateUrl: "header/header.html",
      controller: 'HeaderCtrl',
      controllerAs: 'header'
    };
  }]);

  header.controller('HeaderCtrl', ['$log', '$scope', '$location', 'SERVER_DATA', function($log, $scope, $location, SERVER_DATA){
    $log.log('header controller initialized');
    this.imgUrl = SERVER_DATA.IMG_URL;
    this.baseUrl = SERVER_DATA.BASE_URL;
  }]);
})();

在本单元中，我成功访问了模块模板中的变量。当我在另一个模板，通知中尝试此操作时，这也有效：的 notifications.js

(function(){
  'use strict';

  var notifications = angular.module('stormforsStats.notifications', ['ngRoute'])

  notifications.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/notifications', {
      templateUrl: 'parts/pages/notifications/notifications.html',
      controller: 'NotificationsCtrl'
    });
  }])

  notifications.controller('NotificationsCtrl', ['$log', 'SERVER_DATA', function($log, SERVER_DATA) {
    this.imgUrl = SERVER_DATA.IMG_URL;
    this.baseUrl = SERVER_DATA.BASE_URL;
    $log.log('notifications controller: '+this.baseUrl);
    $log.log(SERVER_DATA);
  }]);
})();

上面的代码成功记录了变量。

到目前为止没问题，但是当我尝试将变量注入一个非常相似的模块时，它不起作用。即使我在注射中输入拼写错误，它也不会被检测到，尽管执行控制器并且控制器中的日志显示：的 home.js

(function(){
  'use strict';

  var home = angular.module('stormforsStats.home',['ngRoute', 'stormforsStats.factory'])

  home.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {
      templateUrl: 'home/home.html',
      controller: 'HomeCtrl',
      controllerAs: 'home'
    });
  }])

  home.controller('HomeCtrl', ['$rootScope', '$scope', '$log', 'dataFactory', 'SERVER_DATA', function($rootScope, $scope, $log, dataFactory, SERVER_DATA) {
    this.imgUrl = SERVER_DATA.IMG_URL;
    this.baseUrl = SERVER_DATA.BASE_URL;
    $log.log('home controller: '+this.baseUrl);
    $log.log(SERVER_DATA);
  }]);
})();

home.js代码记录了家庭控制器＆＃39;但没有注入变量。任何人都可以帮我解决这个问题，还是让我朝着正确的方向前进？提前谢谢！

Answer 1

var home = angular.module('stormforsStats.home')

启动与您使用

启动的模块不同的模块

var conf = angular.module('stormforsStats.conf').

您也没有将stormforStats.conf添加到stormforsStats.home的依赖项中，因此您无法使用您的模块无法识别的内容。添加依赖项，它将被解决（这应该解决它： var home = angular.module('stormforsStats.home',['ngRoute', 'stormforsStats.factory', 'stormforsStats.config'])）

Answer 2

当stormforsStats.home模块依赖于stormforsStats.config模块时，则在模块声明中枚举它

var home = angular.module('stormforsStats.home',['ngRoute', 'stormforsStats.factory', 'stormforsStats.config'])

AngularJS全局变量在模块中不可访问

2 个答案: