angularjs - 在将指令模板添加到 AngularJS 的范围之前编译指令模板

Question

我有一个像这样的AngularJS指令：

MyDirective = (myService) ->

  templateUrl: 'my-partial.html'

  compile: () ->
    pre: ($scope, $element, $attrs, $controller) ->
      $attrs.$observe 'myDirective', (name) ->
        success = (response) ->
          $scope.entries = response

        failure = () ->
          console.log "Failed to load data for #{name}"

        myService.loadData(name)
        .then success, failure

MyDirective.$inject = ['MyService']

和部分：

<ul>
  <li data-ng-repeat="entry in entries">
    <img src="{{entry.url}}">
  </li>
</ul>

在将其添加到 DOM 之前，如何编译模板，从而用...src="{{entry.url}}"...正确的图像替换？src

问题是我们在异步调用接收到数据之前收到了一些 404 错误，我们希望避免这些错误。

Answer 1

我们遇到的问题是该templateUrl属性导致我们的异步数据加载出现问题，因此我们删除了部分并将模板 HTML 添加到我们的父部分中。

第二个问题是我们使用src而不是ng-src; 后者在将自身重写为属性之前等待分配任何模板值src，从而防止 404。