CODEWITHSUNDEEP
angularjsangularjs-directivetooltipangular-bootstrap
Patrick
Patrick

Reputation: 139

angular JS dynamic tooltip creation

EDIT: It seems like the Error or wrong handling is because the scope does not gets updated when the email field is not valid... is there a way to chang that?

this is my first question on stackoverflow so i hope i will do it right.

I am pretty new to angular js and i am creating some basics at the moment. in my demo app i created a normal form in a bootstrap style and i was planing to create a directive to show the errors in a bootstrap way. so far so good. that was working and my next step was to create a angular js bootstrap tooltip directive when the form is not valid. the thing is, that i wanna do this dynamic.

i post some code to explain it better:

<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();
            }
        }
    }
})();

That is working so far . it just adds a has-feedback,has-error class to the parent div and a span with an error-icon after the input.

but back to my plan, now I also want to create a dynamic tooltip for the input. so I planed to add something like that in the "toogle" function

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

But that is not working because the input field got already compiled before. so I asked google about it and there I found some solutions with $compile

$compile(inputNgEl)(scope);

But when I am using it, and I type in a valid email address the field gets reset. aaa@aaa (still working) but after I add the aaa@aaa. (the field gets reseted - I guess compiled again). the tooltip would work btw.

Can anybody help me with that or is there a better solution to create a dynamic angular bootstrap tooltip?

Upvotes: 0

Views: 598

Answers (1)

user3334406
user3334406

Reputation: 337

Maybe you need to add a $watch on the input element, and see if it changes, add a tooltip in the input element and compile it

Upvotes: 0

Related Questions