Javascript AngularJs将输入元素转移到模板中

我想将（

transclude

）

元素插入模板中的

问题是，我得到：

错误：$compile:multidir多指令资源争用

，我不知道为什么，如果有人能解释我应该如何改进代码，使其正常工作，我将不胜感激

模板：

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

        <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>

{{errorMessage}}

指令：

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

        <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>

loginApp.directive（'inputValidationWrapper'，[function（）{
返回{
限制：'E'，
范围：{
validatedField:“=”，
错误消息：'@'
},
模板：“”，
链接：函数（范围、元素、属性）{
作用域.$watch（“validatedField.$toucted”），函数（）{
if（scope.validatedField&&scope.validatedField.$toucted）{
作用域$applyAsync（函数（）{
scope.contentUrl='../pages/templates/validation wrapper tplt.html'；
});
if（scope.validatedField.$valid）{
元素removeAttr（'popover'）；
}
}
});
},
替换：正确，
转移：对
};
}]);

用法（Html）：

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

        <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>

您需要设置

replace:false，

好的，这个已删除的错误，但是DOM上没有显示任何内容。您可以创建一个plunkr吗？我创建了，但说实话，我知道如何正确设置，为什么需要动态加载模板？请看一下这个代码的工作演示。