Angularjs 我的指令'；s'；模板：'；装订工作，但'；模板URL:'；绑定失败

我正在制作一个可以拖放值的日历。我使用

ng repeat

为每天创建下降目标。它重复一个指令

，您可以在下面看到该指令。当我在指令中使用

template:

时，我的数据填充得很好，但我尝试将该模板移动到一个单独的文件中，并使用

templateURL:

但我的数据不显示。它仍在重复该元素，并且没有控制台错误，因此绑定似乎失败了如何维护绑定？

index.html

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

解决方案

---

使用

templateUrl:

而不是

templateUrl

通常情况下，出现这种情况是因为模板的路径解析不正确

我很幸运，或者将模板捆绑在javascript中，以便使用已知ID（url路径）预缓存它们，或者从应用程序的根目录对完整路径进行硬编码

---

您可以使用开发者工具中的“网络”来验证angular正在寻找的路由。

通常情况下，发生这种情况是因为模板的路径解析不正确

我很幸运，或者将模板捆绑在javascript中，以便使用已知ID（url路径）预缓存它们，或者从应用程序的根目录对完整路径进行硬编码

---

您可以使用开发者工具中的“网络”来验证angular正在寻找的路径。

路径可能不正确。。。看看浏览器dev tools network for clues中发出的ajax请求，很可能../并没有达到您认为的效果。我找不到任何官方文档，但谷歌搜索似乎表明它将从index.html中查找一个目录，而不是从指令js文件中查找一个目录。路径可能不正确。。。看看浏览器dev tools network for clues中发出的ajax请求，很可能../并没有达到您认为的效果。我找不到任何官方文档，但谷歌搜索似乎表明它将从index.html向下搜索一个目录，指令js文件中没有一个目录。我使用的是

templateURL:

而不是正确的

temnplateUrl:

我使用的是

templateURL:

而不是正确的

temnplateUrl:

.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
    }
  };
});

<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"] },
    ...
];