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。

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

1 个答案: