Fatal编程技术网
  • javascript/
  • Javascript 在AngularJS中注册可从视图访问的全局变量

Javascript 在AngularJS中注册可从视图访问的全局变量

javascript angularjs

Javascript 在AngularJS中注册可从视图访问的全局变量,javascript,angularjs,Javascript,Angularjs,我不想将图像存储URL公开给视图，这样我就可以在所有视图中这样使用它： <img ng-src="{{storageUrl}}/logo.png" 但问题是，几乎在每个控制器中，我都需要注入此服务并向视图公开此变量。我不想重复这么多代码。因此，我对全局地向ALL视图公开一些配置变量感兴趣。你有什么建议 感谢“全球”范围方式 将其设置为$rootScope。尽管全球范围是不明智的 此外，如果必须使用全局作用域（$rootScope）来跟踪此操作，则可以在run（）块中设置它，并在应用程序准

我不想将图像存储URL公开给视图，这样我就可以在所有视图中这样使用它：

<img ng-src="{{storageUrl}}/logo.png"
但问题是，几乎在每个控制器中，我都需要注入此服务并向视图公开此变量。我不想重复这么多代码。因此，我对全局地向ALL视图公开一些配置变量感兴趣。你有什么建议

感谢“全球”范围方式 将其设置为
$rootScope
。尽管全球范围是不明智的

此外，如果必须使用全局作用域（$rootScope）来跟踪此操作，则可以在
run（）
块中设置它，并在应用程序准备就绪后立即进行设置：

angular.module('myApp').run([
  '$rootScope', 'AppConfigService', 
  function($rootScope, AppConfigService) {
    $rootScope.storageUrl = AppConfigService.storageUrl
  }
]);
全局作用域的问题是，加载到应用程序中的任何其他模块都可能很容易在$rootScope上删除变量，这将很难调试

更好的方法：直接在“外部控制器”中使用服务： 然后将整个应用程序包装到该控制器中：

<body ng-controller="OuterCtrl">
  <div ng-controller="MyCtrl"> other stuff here </div>
</body>


这里还有其他东西
为什么这样做有效？因为此控制器下的所有控制器和指令通常从该控制器的作用域继承其作用域。

以“全局”作用域方式 将其设置为
$rootScope
。尽管全球范围是不明智的

此外，如果必须使用全局作用域（$rootScope）来跟踪此操作，则可以在
run（）
块中设置它，并在应用程序准备就绪后立即进行设置：

angular.module('myApp').run([
  '$rootScope', 'AppConfigService', 
  function($rootScope, AppConfigService) {
    $rootScope.storageUrl = AppConfigService.storageUrl
  }
]);
全局作用域的问题是，加载到应用程序中的任何其他模块都可能很容易在$rootScope上删除变量，这将很难调试

更好的方法：直接在“外部控制器”中使用服务： 然后将整个应用程序包装到该控制器中：

<body ng-controller="OuterCtrl">
  <div ng-controller="MyCtrl"> other stuff here </div>
</body>


这里还有其他东西
为什么这样做有效？因为此控制器下的所有控制器和指令通常从该控制器的作用域继承其作用域。

一个选项是为此创建一个指令，并在任何地方使用该指令，而不是
ng src
。大概是这样的：

myModule.directive('mySrc', ['AppConfigService', function(AppConfigService) {
    return {
        restrict: 'A',
        compile: function(element, attrs) {
            element.attr('src', AppConfigService.storageUrl + attrs.mySrc);
        }
    };
}]);
然后，您可以在任何地方使用图像的相对路径

<img my-src="/logo.png" />
一个选项是为此创建一个指令，并在任何地方使用该指令，而不是
ng src
。大概是这样的：

myModule.directive('mySrc', ['AppConfigService', function(AppConfigService) {
    return {
        restrict: 'A',
        compile: function(element, attrs) {
            element.attr('src', AppConfigService.storageUrl + attrs.mySrc);
        }
    };
}]);
然后，您可以在任何地方使用图像的相对路径

<img my-src="/logo.png" />