Question

我正在制作一个可以拖放值的日历。我使用ng-repeat为每天创建一个放置目标。它重复了一个指令<drop-target>，你可以在下面看到。当我在指令中使用template:时，我的数据填充得很好，但我尝试将该模板移动到单独的文件中并使用templateURL:但我的数据不会显示。它仍在重复元素，并且没有控制台错误，所以看起来绑定失败了。 如何维护绑定？

的index.html

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

drop-target指令

.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（url路径）预先缓存，或者从应用程序的根目录硬编码完整路径。

您可以使用开发者工具中的“网络”验证角度寻找的路线。

我的指令＆＃39;模板：＆＃39;绑定工作，但＆＃39; templateURL：＆＃39;绑定失败

1 个答案: