Question

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

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

我对角度js很新，我现在正在创造一些基础知识。在我的演示应用程序中，我以引导程序样式创建了一个普通表单，我正计划创建一个指令以引导方式显示错误。到现在为止还挺好。这是有效的，我的下一步是在表单无效时创建一个角度js bootstrap tooltip指令。问题是，我想做这个动态。

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

<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");

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

$compile(inputNgEl)(scope);

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

任何人都可以帮我解决这个问题，还是有更好的解决方案来创建动态角度引导工具提示？

Answer 1

也许您需要在input元素上添加$ watch，看看它是否发生变化，在input元素中添加工具提示并编译它

angular JS动态工具提示创建

1 个答案: