angularjsディレクティブを介したテキストバインディング

Question

ディレクティブのビューに文字列値を取得する必要がありますが、それは簡単ではありませんが、機能しません。 <hc-component-blocker animation="/images/spinner_black_16.gif"></hc-component-blocker>

ディレクティブ：

angular.module('xnuapp') 
    .directive('hcComponentBlocker', function() { 
     return { 
      templateUrl: 'views/hccomponentblocker.html', 
      priority: 1005, 
      restrict: 'E', 
      replace: true, 
      scope: { 
       animation: '@' 
      }, 
      controller: 'ComponentBlockerCtrl', 
      controllerAs: 'ComponentBlocker', 
      bindToController: true 
     }; 
}); 

ディレクティブのテンプレート：

<div class="component-blocker" ng-if="!ComponentBlocker.thisComponentIsLoaded"> 
    <img ng-src="{{ComponentBlocker.animation}}"/> 
</div> 

ComponentBlockerCtrl：

angular.module('xnuapp') 
    .controller('ComponentBlockerCtrl', function ($scope, HC_EVENTS) { 
     console.log(this.animation); 
}); 

ビューで

ディレクティブを呼び出します

これを実行すると、コンソールで予想される文字列値が取得されます（「/images/spinner_black_16.gif」）。

画像は表示されません。 HTMLでレンダリングされるものは<div class="component-blocker ng-scope" ng-if="!ComponentBlocker.thisComponentIsLoaded" animation="/images/spinner_black_16.gif"><img></div>

どうすればよいですか？私はこれがコントローラーとビューにanimationの文字列値を取得するモデルだと思った。ビューに渡されたプロパティの値が取得されないのはなぜですか？

Answer 1

replaceをfalseに変更して修正しました。なぜそれがうまくいったのか分かりませんが、それはありました。