AngularJS全局變量無法在模塊中訪問

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代碼確實記錄了“ home controller”，但與注入的變量無關。 有人可以幫助我解決這個問題，還是讓我朝正確的方向發展？ 提前致謝！

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'])