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>

這是我的應用程序目錄的布局方式：我的directives.js文件位於js目錄中，而formFields.html文件位於/js/directives/...

Answer 1

一方面，您將templateUrl大小寫錯誤設置為templateURL 。 如果這不能解決您的問題，則可能是因為絕對URL。

您是通過服務器提供文件還是通過磁盤在瀏覽器中打開文件？

如果您的鏈接是file://C://www/html/js/directives ，則絕對路徑/js/directives file://C:/js/directives ，顯然，其中沒有模板代碼。 在這種情況下，您需要使用相對路徑。

Answer 2

您有一個拼寫（大小寫）錯誤。 templateUrl ，而不是templateURL