AngularJS自定义指令templateURL

Question

在AngularJS中创建我的第一个自定义指令，但在使用templateURL参数时遇到了一些问题;它实际上并没有请求我试图呼叫的页面。

当我使用普通template参数时，它按预期工作。 我想也许我在templateURL中使用的路径可能不正确？

这是我主页中的HTML：

<div class="container" ng-controller="formFields">
    <p>{{person.name}}</p>
    <div ng-sparkline person="person"></div>
</div>

这是我的自定义指令：

myApp.directive('ngSparkline', function() {
  return {
    replace: true,
    restrict: 'EA',
    scope: {
        person: '='
    },
    //template: '<p class="lead">Hi, {{person.name}}!</p>'
      templateURL: '/js/directives/formFields.html'
  }
});

这是我的formFields.html文件：

<p class="lead">Hey, {{person.name}}</p>

这是我的app目录的布局方式： 我的directives.js文件位于js目录中，而formFields.html文件位于/js/directives/...中

Answer 1

你有拼写（案例）错误。 templateUrl，而非templateURL

Answer 2

首先，您将templateUrl错误标记为templateURL。 如果这不能解决您的问题，可能是因为绝对URL。

您是通过服务器提供文件还是通过磁盘在浏览器中打开文件？

如果您的链接为file://C://www/html/js/directives，则绝对路径/js/directives的目标是file://C:/js/directives，其中没有模板代码。在这种情况下，您需要使用相对路径。