Angular指令無法加載

Question

我在anguarjs中編寫了一個指令並嘗試在html頁面中使用該指令。

directive.js

.directive('formFieldNew', function($timeout, FieldTypes) { 
return { 
    restrict : 'EA', 
    templateUrl : '/common-licensing/resources/partials/subscriber/template.html', 
    replace : true, 
    scope : { 
     record : '=', 
     field : '@', 
     live : '@', 
     required : '@' 
    }, 
    link : function($scope, element, attr) { 
     $scope.$on('record:invalid', function() { 
      $scope[$scope.field].$setDirty(); 
     }); 

     $scope.types = FieldTypes; 

     $scope.remove = function(field) { 
      delete $scope.record[field]; 
      $scope.blurUpdate(); 
     }; 

     $scope.blurUpdate = function() { 
      if ($scope.live !== 'false') { 
       $scope.record.$update(function(updatedRecord) { 
        $scope.record = updatedRecord; 
       }); 
      } 
     }; 
     var saveTimeout; 
     $scope.update = function() { 
      $timeout.cancel(saveTimeout); 
      saveTimeout = $timeout($scope.blurUpdate, 1000); 
     }; 
    } 
}; 

new.html

<form name='newContact' novalidate class='form-horizontal'> 
<form-field-new ng-repeat='(k,v) in productTempDetailsLists' record='productTempDetailsLists' field='{{k}}'></form-field-new> 
<button class='btn btn-primary' ng-click='save()' ng-disabled='newContact.$invalid'> Create Contact </button> 

</form> 

template.html

<div> 
<input ng-model='record[field][0]' type='{{record[field][1]}}' class='form control'/> 
</div> 

當我運行該文件，我摹在我的控制檯中設置下面的錯誤。

Error: [$compile:tplrt] http://errors.angularjs.org/1.3.15/$compile/tplrt?p0=formFieldNew&p1=%2Fcommon-licensing%2Fresources%2Fpartials%2Fsubscriber%2Ftemplate.html 
    at Error (native) 
    at http://localhost:8080/common-licensing/resources/lib/angular/angular.min.js:6:417 
    at http://localhost:8080/common-licensing/resources/lib/angular/angular.min.js:65:275 
    at http://localhost:8080/common-licensing/resources/lib/angular/angular.min.js:112:113 
    at n.$eval (http://localhost:8080/common-licensing/resources/lib/angular/angular.min.js:126:15) 
    at n.$digest (http://localhost:8080/common-licensing/resources/lib/angular/angular.min.js:123:106) 
    at n.$apply (http://localhost:8080/common-licensing/resources/lib/angular/angular.min.js:126:293) 
    at l (http://localhost:8080/common-licensing/resources/lib/angular/angular.min.js:81:240) 
    at M (http://localhost:8080/common-licensing/resources/lib/angular/angular.min.js:85:342) 
    at XMLHttpRequest.F.onload (http://localhost:8080/common-licensing/resources/lib/angular/angular.min.js:86:367) 

我嘗試添加了<div>標籤爲我new.html文件按照錯誤日誌，但沒有奏效。請幫助我。

Answer 1

我有類似的問題，其中templateURL不適用於絕對URL。看到這個檢查了這一點，其中，你會發現同樣的錯誤http://plnkr.co/edit/NoSZjfIiCiRrCaBbsHiE?p=preview

使用相對的URL和嘗試以下

.directive('formFieldNew', function($timeout, FieldTypes) { 
return { 
    restrict : 'E', 
    //Not sure if this is correct relative path. check 
    templateUrl : '../common-licensing/resources/partials/subscriber/template.html', 
    replace : true, 
    scope : { 
     record : '=', 
     field : '@', 
     live : '@', 
     required : '@' 
    }, 
    link : function($scope, element, attr) { 
     $scope.$on('record:invalid', function() { 
      $scope[$scope.field].$setDirty(); 
     }); 

     $scope.types = FieldTypes; 

     $scope.remove = function(field) { 
      delete $scope.record[field]; 
      $scope.blurUpdate(); 
     }; 

     $scope.blurUpdate = function() { 
      if ($scope.live !== 'false') { 
       $scope.record.$update(function(updatedRecord) { 
        $scope.record = updatedRecord; 
       }); 
      } 
     }; 
     var saveTimeout; 
     $scope.update = function() { 
      $timeout.cancel(saveTimeout); 
      saveTimeout = $timeout($scope.blurUpdate, 1000); 
     }; 
    } 
};