Angularjs 创建动态工具提示

编辑： 似乎错误或错误处理是因为当电子邮件字段无效时，作用域没有得到更新。。。有办法改变吗

这是我关于stackoverflow的第一个问题，所以我希望我能做得对

我是angular js的新手，目前正在创建一些基础知识。 在我的演示应用程序中，我创建了一个引导式的标准表单，并计划创建一个指令以引导方式显示错误。到现在为止，一直都还不错。这是可行的，我的下一步是在表单无效时创建一个angular js引导工具提示指令。问题是，我想做这个动作

我发布了一些代码来更好地解释它：

<b>HTML:</b>

     <div class="container" ng-controller="LoginCtrl as vm">
            <form id="login" name="vm.loginForm" class="form-signin" ng-submit="vm.login()" novalidate>

                <div show-errors>
                    <input type="email" name="username" ng-model="vm.credentials.username" class="form-control" placeholder="Email address" required autofocus>
                </div>
                <div show-errors>
                    <input type="password" name="password" ng-model="vm.credentials.password" class="form-control" placeholder="Password" required>
                 </div>

                <button class="btn btn-lg btn-primary btn-block" id="submit" type="submit">
                    Login
                    <span class="spinner"><i class="fa fa-refresh fa-spin"></i></span>
                </button>
            </form>
</div>

<b>showError Directive:</b>

    (function () {

    angular.module('testapp.Validate', []).directive('showErrors', validationDirective);

    /**
     * @name validate directive
     */
    function validationDirective($compile) {
        return {
            require: '^form',
            restrict: 'A',
            link: function (scope, el, attrs, formCtrl) {
                var inputNgEl = angular.element(el[0].querySelector("[name]"));
                var inputName = inputNgEl.attr('name');

                inputNgEl.bind('blur', function () {
                    toogle(inputNgEl, el, formCtrl[inputName]);
                });

                scope.$on('show-errors-check', function () {
                    toogle(inputNgEl, el, formCtrl[inputName]);
                });
            }
        }
    }

    function toogle(inputNgEl, fromGroup, inputField) {

        fromGroup.toggleClass('has-feedback has-error', inputField.$invalid);
        if (inputField.$invalid && !fromGroup[0].querySelector(".glyphicon-remove")) {
            inputNgEl.after('<span class="glyphicon form-control-feedback glyphicon-remove"></span>');
        } else if (!inputField.$invalid) {
            if (fromGroup[0].querySelector(".glyphicon-remove") != null) {
                fromGroup[0].querySelector(".glyphicon-remove").remove();
            }
        }
    }
})();

但这不起作用，因为输入字段以前已经编译过了。 所以我问了谷歌，在那里我找到了一些使用$compile的解决方案

$compile(inputNgEl)(scope);

但是当我使用它时，我输入了一个有效的电子邮件地址，该字段就会被重置。aaa@aaa（仍在工作）但在我添加aaa@aaa. （字段被重置-我想是再次编译了）。顺便说一句，工具提示会起作用

---

有人能帮我吗？或者有更好的方法来创建动态角度引导工具提示吗？

也许你需要在输入元素上添加$watch，看看它是否会改变，在输入元素中添加工具提示并编译它

你试过角度引导吗？我正在使用这个组件，但后来我添加了“tooltip”属性，因为它是表单验证的动态特性。现在我不知道如何连接这些部分或重新编译它的权利，我已经发现了错误。ngmodel（输入）的范围在其无效时不会更新。因此，如果ngModel是有效的，那么数据绑定就是有效的。当其无效时，是否有方法也对其进行更新？

$compile(inputNgEl)(scope);