我的指令的“模板：”綁定有效，但“模板URL：”綁定失敗

Question

我正在制作一個日歷，可以將值拖放到其中。 我每天使用ng-repeat創建放置目標。 它重復指令<drop-target> ，您可以在下面看到。 當我在指令中使用template: ，我的數據可以很好地填充，但是我試圖將該模板移到一個單獨的文件中並使用templateURL:但是我的數據沒有顯示。 它仍在重復該元素，並且沒有控制台錯誤，因此似乎綁定失敗。 我該怎么做才能保持綁定？

index.html

<div ng-repeat="day in thisMonth">
    <drop-target day="day"></drop-target>
</div>

下降目標指令

.directive('dropTarget', function(){
  return { 
    restrict: 'E',
    scope: {
      day: '='
    },
      // This works fine
    template: '<div class="droptarget" id="day{{day.date}}">{{day.date}}<div ng-repeat="set in day.sets">{{set}}</div></div>',
      // This does not work 
    templateURL: "../templates/calDay.html",
    link: function(scope, element, attrs){
       // event functions removed
    }
  };
});

calDay.html（外部模板失敗）

<div class="droptarget" id="{{day.date}}">
    {{day.date}}
    <div ng-repeat="set in day.sets">
        {{set}}
    </div>
</div>

來自控制器的示例數據

$scope.thisMonth = [
    {"date" : "2016-01-01", "sets" : ["Squat", "Push Ups"] },
    {"date" : "2016-01-02", "sets" : ["Deadlift", "Run"] },
    ...
];

解

使用templateUrl:而不是templateURL

Answer 1

通常，發生這種情況是因為templatURL的路徑解析不正確。

我很幸運，要么將模板捆綁在javascript中，以使其預先緩存有已知的ID（網址路徑），要么對從應用程序根目錄開始的完整路徑進行硬編碼。

您可以通過使用開發人員工具中的“網絡”來驗證angular正在尋找的路線。