Angular JS动态工具提示创建

Question

编辑： 似乎错误或错误处理是因为当电子邮件字段无效时范围没有更新......有没有办法改变它？

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

我对 Angular js 很陌生，目前我正在创建一些基础知识。 在我的演示应用程序中，我以引导样式创建了一个普通表单，并且我计划创建一个指令以引导方式显示错误。到目前为止，一切都很好。这是有效的，我的下一步是在表单无效时创建一个有角度的 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();
            }
        }
    }
})();

到目前为止，这是有效的。它只是在父 div 中添加了一个 has-feedback、has-error 类，并在输入后添加了一个带有错误图标的 span。

但回到我的计划，现在我还想为输入创建一个动态工具提示。所以我打算在“toogle”功能中添加类似的东西

inputNgEl.attr('uib-tooltip',"aaaa");
        inputNgEl.attr('tooltip-placement',"right");
        inputNgEl.attr('tooltip-trigger',"mouseenter");
        inputNgEl.attr('tooltip-class',"testTool");

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

$compile(inputNgEl)(scope);

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

谁能帮我解决这个问题，或者有更好的解决方案来创建动态角度引导工具提示吗？

Answer 1

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