グローバルに設定されたCDN URLをAngularJSのテンプレートに渡すにはどうすればよいですか？

Question

これは単純なはずですが、広範囲にわたるグーグル・グーグルの後には答えが見つかりませんでした。

ウェブアプリケーション用のCDNとしてクラウドフロントを使用しています。クラウドフロントURLを1つのファイルに設定したいのですが、将来変更される可能性があります。私は現在CSSスタイルの背景を介していくつかの画像を使用するようにテンプレートに値を渡すことを現在試みています。私は、1つの解決策がすべてのコントローラーの範囲に入れられることを知っていましたが、たくさんあるので、これを含めて、忘れてしまえばエラーのコードをより可能にします。

app.js：

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

main.js：

$rootScope.CDN = CDNurl; 

navbar.html

だから、これは私が試してみましたコード例は次のとおりです。

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

は機能しません。もし私がそれをNavbarのコントローラーに含めると、もちろん動作しますが、私はそれをグローバルに渡す必要があります。

これを行う正しい方法は何ですか？何かを設定してテンプレートから手をつないでください。

Answer 1

親コントローラがDOMの上部にあり、$rootScope.CDN = CDNurl;を設定している場合は、すべての子ビューでCDNurlにアクセスできます。

それとも別のオプションはrunを使用するかもしれません（私はこれを試していない）：

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

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