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