Question

我有一个带控制器和模板的组件。当模板位于html标签之间时，控制器中的属性将被替换，但不会作为标签属性。

所以给定了这个组件：

  angular.module('OeApp').component('phonemeComponent', {
    templateUrl: '/src/templates/phoneme.template.html',
    controller: 'PhonemeController as ctrl',
    bindings: {
      exercise: '<'
    }
  })

控制器：

angular.module('OeApp').controller('PhonemeController', PhonemeController);

function PhonemeController() {
  var ctrl = this;

  ctrl.listenButtonUrl = "/images/speaker-button-sm.gif"; 
};

模板摘录：

<div id="phoneticSymbol">{{ctrl.exercise.phoneticSymbol}}</div>

<!-- sample word -->
<img class="listenButton" src="ctrl.listenButtonUrl"></img>

<div id="oeWord">{{ctrl.exercise.sampleWordOE}}</div>
<div id="modWord">({{ctrl.exercise.sampleWordModE}})</div>

phoneticSymbol，oeWord和modWord都按预期更换，但img的src是文字字符串"ctrl.listenButtonUrl"。我错过了什么？

我尝试将ctrl.listenButtonUrl括在大括号中，即使它不是在其他示例代码中如何工作，并且浏览器首先尝试将文字字符串解析为url（导致 404 ），但最终得到了正确的价值，所以我不认为这是正确的解决方案。

Answer 1

您需要使用ng-src

<img class="listenButton" ng-src="{{ctrl.listenButtonUrl}}"></img>

Angular JS控制器属性未评估

1 个答案: