Question

我在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)

我尝试根据错误日志为我的new.html文件添加<div>标记，但它不起作用。请帮帮我。

Answer 1

我遇到了类似问题，其中templateURL无法使用绝对网址。要查看此信息，请在其中找到相同的错误http://plnkr.co/edit/NoSZjfIiCiRrCaBbsHiE?p=preview

使用相对网址并尝试以下

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

AngularJS指令未加载

1 个答案: