Question

HTML

<body ng-app="myApp">
  <div ng-controller="myController">
    <my-template src="https://plnkr.co/img/plunker.png"></my-template>
  </div>
</body>

JS

myApp.directive('myTemplate', function() {
  return {
    scope: {src: '@'},
    template: '<img src="{{src}}"></img>'
  }
});

在我的示例plnkr中，我有一个从指令模板动态加载的图像。如果您在运行时查看控制台，则可以看到尝试加载“https://run.plnkr.co/xLToRcEuT2Xr8he7/%7B%7Bsrc%7D%7D”时出错，这是模板的未解析版本（％7B％7Vsrc％7D％7D = {{src}}）。然后由angular作为绑定拾取，并加载正确的img。

代码有效，但我不喜欢有错误。在指令中解析后，我也不需要模板中的绑定，因为父元素已经绑定，底层子节点永远不会独立更改。

有没有办法在将模板发送回DOM之前编译模板a）删除绑定和（主要）b）避免此错误。

Answer 1

如果您希望{{src}}仅绑定一次，请在其前面加上双冒号，即{{src}}变为{{::src}}。另外，将ng-src而不是src添加到图片即<img ng-src={{::src}} />

在将指令发送到DOM之前，如何在指令中编译模板？

1 个答案: