未评估角度 JS 控制器属性

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>