Angular 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 括在 curly 大括号中，即使在其他示例代码中不是这样，浏览器首先尝试将文字字符串解析为 url（导致 404），但最终得到正确的值，所以我认为这不是正确的解决方案。

Answer 1

您需要使用ng-src

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

Angular JS 控制器属性未评估

Angular JS controller property not evaluated

angularjs

angularjs-components

Angular JS 控制器 属性 未评估

Angular JS controller property not evaluated

angularjs

angularjs-components

Angular JS 控制器属性未评估