通過angularjs指令進行文本綁定

我需要將一個字符串值放到指令的視圖中，雖然這應該很簡單，但它不起作用。通過angularjs指令進行文本綁定

視圖

調用指令： <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的字符串值獲取到控制器和視圖中的模型。爲什麼視圖不能獲得傳遞給它的屬性的值？

來源

2016-05-17 The E

對於ng-src，您不使用{{}}。你會如果你正在做src =。應該是 – Scottie

當我將ng-src =更改爲src = –

這是通過將replace更改爲false來修復的。我不完全確定這是爲什麼起作用，但它確實如此。

來源

2016-05-18 19:01:28

通過angularjs指令進行文本綁定

回答

相關問題