Hide input-help on form using AngularJS

Question

I'm currently learning AngularJS and i would like to accomplish a simple task. On a form input, i would like to hide corresponding 'input-help' even data entered in input is invalid. The way i'm currently doing this invoke some jquery. But i'm searching the way to do it using AngularJS logic. I think i should use directive but as i'm new to angular, i don't know exactly how to do it.

Here is the jsFiddle sample code working using jquery: JSFIDDLE

And here is the jsFiddle sample code not working (no jquery): JSFIDDLE {For test, enter just few text in password input and blur it}

This is the code i have: {jquery}

$(document).on('blur', '.immediate-help', function () {
    $(this).next('.input-help').fadeOut();
}).on('focus', '.immediate-help', function () {
    $(this).next('.input-help').fadeIn();
});

This works as expected but i would like to use angular directive to do it. Of course, i'm not against using jquery in angular directive.

So, to resume, i would like when blur input is triggered to hide 'input-help' even the text is not valid and using angular directive.

Could someone show me the right way to do it?

Answer 1

You can use Angular-ui .

Angular-UI provides a bunch of directives, which can help you. You have the ui-event directive.

For example you can use

<input ui-event="{ blur : 'blurCallback()' }">
...
<script>
$scope.blurCallback = function() {
alert('Goodbye');
};
</script>

Answer 2

Several approaches:

Using script in directive:

elm argument within directive link callback is a jQuery object if jQuery.js loads before anugular.js in page... or it is a jQlite if jQuery.js not included.

jQlite has many of the most common jQuery methods so you can use :

elm.bind('blur....

See angular.element docs for list of jQlite methods.

Using ng-class

Give form and controls a name . This creates an object formName with properties represented by field names. You can then use angular expressions for classes, or properties like disabled within markup

<form name="myForm">
    <input name="passord"/>
    <div ng-class="{ShowMeClassName: myForm.password.$invalid}"> Error content</div>
</form>

ng-class will toggle the class ShowMeClassName depending on validity of field named password within form named myForm