Include tooltip directive in jcs-autovalidate

[jonsamwell]

Include tooltip directive in jcs-autovalidate

[jonsamwell]

Hi!

Thanks for using the module. Yeah you are correct the html is not being recompiled so the directive is not initializing. You will need to do something like this:

makeInvalid = function (el, errorMsg) {
     el.addClass('redtext')
     el.attr("tooltip", "Tooltip here!");  
     $compile(el.contents())(el.scope());
}

You might need to check the scope and make sure the element is not using an isolatedScope.

You could also have a look at http://stackoverflow.com/a/21487754/1162133

Jon

[cozyazure]

Hi Jon

Still not working, I guess I must have missed out something. I tried to look into el.scope(), I wonder if it is returning the same scope back to the directive.

Here is a <a href=http://plnkr.co/edit/Wzn5GK7XG99PRFlAjUIJ?p=preview">plunkr that illustrates the situation. As you can see, in both input fields their validation requirements are the same. And yes their text do turn red on invalid state, but the tooltip was appended but not $apply()ed. :(

Anyway, this module is definitely awesome. :D

[jonsamwell]

Thanks! I'll take a look tonight :-)

[jonsamwell]

This works for me but the model is removed for some reason? I'll have a better look later.

makeInvalid = function(el, errorMsg) {
        el.addClass('redtext');
        el.attr("tooltip", "This is tooltip!");
        var scope = el.scope();
        $compile(el)(scope);
      }

[cozyazure]

The model is removed because every time the input is invalid, it will invoke our makeInvalid function, and hence it will force a $compile, thus flushing(refreshing) the ng-model away. Lol. Very tricky. I will try to solve this or find any workaround.

If it is resolved I would love to have a PR and make some contribution or so.

[jonsamwell]

Try this....

makeInvalid = function(el, errorMsg) {
        var val = el.val(),
            scope = el.scope();
        el.addClass('redtext');
        el.attr("tooltip", "This is tooltip!");
        $compile(el)(scope);
        $timeout(function () {
          el.val(val);
        });
      }

A pull request would be awesome! :-)

Jon