編譯指示模板將其添加到範圍在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> 

我如何可以編譯模板，從而取代...src="{{entry.url}}"...在將圖像添加到DOM之前使用正確的src作爲圖像？

問題是，在異步調用收到數據之前我們收到了404個錯誤，我們希望避免這些錯誤。

Answer 1

我們遇到的問題是templateUrl屬性導致我們的異步數據加載問題，所以我們刪除了部分並將模板HTML添加到我們的父部分。

第二個問題是我們使用的是src而不是ng-src;後者在將自己重寫爲src屬性之前等待任何模板值被分配，從而阻止404s。