如何将全局配置的 CDN url 传递给 AngularJS 中的模板？

Question

这应该很简单，但经过广泛的谷歌搜索后，我还没有找到答案。

我使用 cloudfront 作为我的 Web 应用程序的 CDN。我想将 cloudfront url 配置为单个文件，因为它将来可能会更改。我目前正在尝试将值传递给模板，因为它们通过 css 样式背景使用一些图像。我发现一种解决方案是将作用域放入每个控制器中，但是其中有很多，并且将其包含在所有控制器中会使代码在被遗忘时更容易出错。

所以，这是我尝试过的代码示例：

app.js：

.constant('CDNurl', 'https://xxxxxxxxxxx.cloudfront.net/')

ma​​in.js：

$rootScope.CDN = CDNurl;

navbar.html:

<div class="avatar__image" 
ng-style="{'background-image':'url(' + 
$root.CDNurl + currentUser.profileImage+')'}">;

不起作用。如果我将它包含在导航栏控制器中，它当然可以工作，但我需要全局传递它。

那么正确的做法是什么？配置一些东西并从模板中访问它？

Answer 1

如果您在 DOM 顶部有一个父控制器，并且您在其中设置了 $rootScope.CDN = CDNurl;，那么您可以访问所有子视图中的 CDNurl。

或者另一种选择可能是使用run（我还没有尝试过）：

var app = angular.module('module', []);

// run blocks
app.run(function($rootScope, CDNurl) {
   $rootScope.CDN = CDNurl;
});