Angularjs 未计算Angular JS控制器属性

我有一个带有控制器和模板的组件。当来自控制器的属性位于html标记之间时，它们将在模板中被替换，而不是作为标记属性

因此，考虑到这一部分：

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

模板片段：

<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>

{{ctrl.exercise.拼音}
{{ctrl.exercise.sampleWordOE}}
（{{ctrl.exercise.sampleWordModE}}）

拼音符号

、

oeWord

和

modWord

都按预期被替换，但img的

src

是文本字符串

“ctrl.listenButtonUrl”

。我错过了什么

我尝试用大括号括住

ctrl.listenButtonUrl

，尽管在其他示例代码中不是这样，浏览器首先尝试将文本字符串解析为url（结果是404），但最终得到了正确的值，因此我认为这不是正确的解决方案。

您需要使用

您需要使用

谢谢！你能帮我理解为什么我仍然需要花括号，而在其他情况下我不需要吗？例如，对于ng show here:Error:{{list.errorMessage}}@Sasha HTML试图变得聪明，并尝试获取src内容（字面上是

{{ctrl.listenButtonUrl}}

），然后AngularJS才能将其替换为需要获取的实际值。您仍然需要大括号，因为允许链接，谢谢！你能帮我理解为什么我仍然需要花括号，而在其他情况下我不需要吗？例如，对于ng show here:Error:{{list.errorMessage}}@Sasha HTML试图变得聪明，并尝试获取src内容（字面上是

{{ctrl.listenButtonUrl}}

），然后AngularJS才能将其替换为需要获取的实际值。您仍然需要大括号，因为允许使用

ng src=“some/path/{{url}”

链接

<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>

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