Javascript 编译具有ngMessage属性的新元素时出现Angularjs错误

我使用以下指令将引导验证项添加到表单中的所有表单组div：

app.directive('bsValidate',($compile: ng.ICompileService) => {
    return {
        restrict: "A",
        link: (scope, element, attrs, ctrl) => {

            function showValidation(formGroupEl: ng.IAugmentedJQuery) {

                var input = formGroupEl.find('input[ng-model],select[ng-model],textarea[ng-model]');
                if (input.length === 0)
                    return;

                var formNameExt = formGroupEl.closest('form').attr('name') + "." + input.attr('name');
                var feedback = $compile('<div ng-messages="' + formNameExt + '" ng-show="' + formNameExt + '.$dirty">')(scope);

                feedback.append($compile('<span ng-message="$valid" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>')(scope));
                feedback.append($compile('<span ng-message="$invalid" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>')(scope));

                formGroupEl.addClass('has-feedback');
                formGroupEl.append(feedback);

                scope.$watch(
                    () => {
                        var val = scope[formGroupEl.closest('form').attr('name')][input.attr('name')];
                        return val.$invalid && (val.$touched || val.$dirty);
                    },(isValid) => {
                        formGroupEl.toggleClass('has-error', isValid);
                    });

                scope.$watch(
                    () => {
                        var val = scope[formGroupEl.closest('form').attr('name')][input.attr('name')];
                        return val.$valid && (val.$touched || val.$dirty);
                    },(isValid) => {
                        formGroupEl.toggleClass('has-success', isValid);
                    });
            }

            if (element.get(0).nodeName.toLowerCase() === 'form') {
                element.find('.form-group').each((i, formGroup) => {
                    showValidation(angular.element(formGroup));
                });
            } else {
                showValidation(element);
            }


        }

    };
});

尝试将消息传递元素添加到表单组元素时出错。如果我把这些行注释掉，一切都会按预期进行！此外，我的模板也可以正常工作：

                <div class="form-group has-feedback" ng-class="{'has-error': comment_form.Name.$invalid && (comment_form.Name.$touched || comment_form.Name.$dirty), 'has-success': comment_form.Name.$valid && comment_form.Name.$dirty}">
                    @Html.TextBoxFor(m => m.Name, new { @class = "form-control input-lg focus-start", placeholder = "Your Name", ng_model = "name", required = true })
                    <div ng-messages="comment_form.Name" ng-show="comment_form.Name.$dirty">
                        <span ng-message="$valid" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                        <span ng-message="$invalid" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
                    </div>
                    <div ng-messages="comment_form.Name.$error" ng-show="comment_form.Name.$dirty">
                        <span class="help-block" ng-message="required">
                            Your Name is required.
                        </span>
                    </div>
                </div>

有更好的办法吗

Error: [$compile:ctreq] Controller 'ngMessages', required by directive 'ngMessage', can't be found! 

                <div class="form-group has-feedback" ng-class="{'has-error': comment_form.Name.$invalid && (comment_form.Name.$touched || comment_form.Name.$dirty), 'has-success': comment_form.Name.$valid && comment_form.Name.$dirty}">
                    @Html.TextBoxFor(m => m.Name, new { @class = "form-control input-lg focus-start", placeholder = "Your Name", ng_model = "name", required = true })
                    <div ng-messages="comment_form.Name" ng-show="comment_form.Name.$dirty">
                        <span ng-message="$valid" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                        <span ng-message="$invalid" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
                    </div>
                    <div ng-messages="comment_form.Name.$error" ng-show="comment_form.Name.$dirty">
                        <span class="help-block" ng-message="required">
                            Your Name is required.
                        </span>
                    </div>
                </div>

var feedback = $('<div ng-messages="' + formNameExt + '" ng-show="' + formNameExt + '.$dirty">');
var validFeedback = $('<span ng-message="$valid" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
var invalidFeedback = $('<span ng-message="$invalid" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');

formGroupEl.append(feedback);
$compile(feedback)(scope);

feedback.append(validFeedback);
feedback.append(invalidFeedback);

$compile(validFeedback)(scope);
$compile(invalidFeedback)(scope);