Угловая директива не загружается

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> 

Когда я запускаю файл Я г etting ошибка ниже в моей консоли.

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