javascript - AngularJsは入力要素をテンプレートに変換します

Question

テンプレートにある要素をinsert( 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>