通过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指令进行文本绑定

回答

相关问题