0

我想在模板中插入（ transclude）<input>元素。<div>

问题是我得到了：Error: $compile:multidir Multiple Directive Resource Contention我不知道为什么，如果有人能解释我应该如何改进我的代码以使其正常工作，我将不胜感激。

模板：

<div class="validatable-input">
    <div class="input-group margin-bottom-sm">
        <ng-transclude></ng-transclude>
        <span class="input-group-addon">
            <i ng-class="{'fa fa-lg fa-times-circle': validatedField.$invalid, 'fa fa-lg fa-check-circle' : validatedField.$valid }" 
               ng-style="validatedField.$invalid ? {color: 'red'} : {color: 'green'}"/>
        </span>
    </div>
    <small ng-if="validatedField.$invalid" ng-style="validatedField.$invalid ? { color: 'red'}: { color: 'green'}">{{errorMessage}}</small>
</div>

指示：

loginApp.directive('inputValidationWrapper', [function () {
    return {
        restrict: 'E',
        scope: {
            validatedField: '=',
            errorMessage: '@'
        },
        template: '<ng-include src="contentUrl"/>',
        link: function (scope, element, attrs) {
            scope.$watch("validatedField.$touched", function () {
                if (scope.validatedField && scope.validatedField.$touched) {
                    scope.$applyAsync(function () {
                        scope.contentUrl = '../../pages/templates/validation-wrapper-tplt.html';
                    });
                    if (scope.validatedField.$valid) {
                        element.removeAttr('popover');
                    }
                }
            });
        },
        replace: true,
        transclude: true
    };
}]);

用法（HTML）：

        <input-validation-wrapper validated-field=regForm.userName error-message="Username is required.">
            <input type="text" class="form-control" placeholder="Username" name="userName" ng-model="userName" required autofocus/>
        </input-validation-wrapper>
4

0 回答 0