Директива AngularJS не загружается

Question

Директива AngularJS не загружается

0

Я написал директиву в AngularJS и попытаюсь использовать директиву на 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 в соответствии с журналом ошибок, но это не сработало. Пожалуйста, помогите мне.

Ajay K 04 дек. 2015, в 04:31

Источник

0

Казалось бы, что templateUrl не является допустимым путем. Это HTML действительно в файле с именем template.js или это опечатка? Везде, где файл называется template.html
Claies 04 дек. 2015, в 03:30
0

Я получал ошибку 404 (не найдено) для другого пути templateUrl, который я пробовал. Этот путь не показывал такой ошибки, поэтому я предположил, что это был правильный путь.
Ajay K 04 дек. 2015, в 03:34
0

Предвидя будущую проблему, вы создаете изолированную область, которая не сможет общаться с контроллером формы. Некоторые встроенные функции не будут работать таким образом. Вам может require: FormController' but that may prove to get tricky. I would just use scope: true`
Cory Silva 04 дек. 2015, в 03:34
0

@Chandan, просто напишите template вместо использования templateUrl чтобы мы могли проверить, есть ли проблема в HTML-шаблоне или нет.
Abhilash Augustine 08 дек. 2015, в 12:00

Показать ещё 2 комментария

Теги:

html

angularjs

1 ответ

Ещё вопросы

Казалось бы, что templateUrl не является допустимым путем. Это HTML действительно в файле с именем template.js или это опечатка? Везде, где файл называется template.html
Я получал ошибку 404 (не найдено) для другого пути templateUrl, который я пробовал. Этот путь не показывал такой ошибки, поэтому я предположил, что это был правильный путь.
Предвидя будущую проблему, вы создаете изолированную область, которая не сможет общаться с контроллером формы. Некоторые встроенные функции не будут работать таким образом. Вам может require: FormController' but that may prove to get tricky. I would just use scope: true`
@Chandan, просто напишите template вместо использования templateUrl чтобы мы могли проверить, есть ли проблема в HTML-шаблоне или нет.

Anand Ghaywankar · Answer 1 · 2015-12-08T10-37-00.000Z

У меня была аналогичная проблема, в которой 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);
        };
    }
};