CODEWITHSUNDEEP
angularjs
Syed Daniyal Asif
Syed Daniyal Asif

Reputation: 736

AngularJS: Simple Blur Function

I am new to AngularJS. Learned from W3school. Now moving forward to know how blur function and ui-event works from other sites. So I got this code which is not working please let me know the reason or a better way to call blur function.

HTML

    <div ng-app="" ng-controller="testing" >
    <input ui-event="{ blur : 'blurCallback()' }">
    </div>

Script tag

function testing($scope){
    $scope.blurCallback = function() {
    alert('Goodbye');
    };
}

Upvotes: 7

Views: 44249

Answers (6)

Pramodi Samaratunga
Pramodi Samaratunga

Reputation: 565

You can Use below Html code for above problem

<div ng-app="" ng-controller="testing" >
    <input ng-blur="blurCallback($event)">
</div>

Upvotes: 1

Artyom Pranovich
Artyom Pranovich

Reputation: 6962

I suggest using ngBlur from the AngularJS box.

This directive became available from 1.2 version of Angular.

<div ng-controller="MyCtrl">
    <input type="text" ng-model="blurModel" ng-blur="onBlur($event)"/>
</div>

function MyCtrl($scope) {
    $scope.onBlur = function($event) {
        console.log($event);
    }
}

I've attached JSFiddle example for you.

If you want to use UI.Utils library you should inject 'ui.utils' module to the project.

var app = angular.module('plunker', ['ui.utils']);

app.controller('MainCtrl', function($scope) {
    $scope.onBlur = function($event) {
        console.log($event);
    };
});

<body ng-controller="MainCtrl">
    <input type="text" placeholder="ui-utils" ui-event="{blur:'onBlur($event)'}"/>
</body>

This is a Plunker with ui.utils usage.

Upvotes: 17

Andre Carneiro
Andre Carneiro

Reputation: 736

I found this solution at bellow and works fine if you don't want to add more dependency in your project(angular-ui).

onblur="angular.element(this).scope().yourFuncion()"

Don't worry! The '$scope' and all angular stuff will be there there! However, I've used function call as "expression" on "ng-blur" in another occasion and it worked too! Why doesn't work sometimes is a mystery for me(no error messages)! Anyways, this was "the last resource" and works fine for me!

Enjoy!

Upvotes: 1

Nikhil T Nair
Nikhil T Nair

Reputation: 101

You can use Angular UI @ http://angular-ui.github.io/ui-utils/ which provide Blurs, Focus, Double-Clicks event or Bind a callback to any event not natively supported by Angular Js

Below is one of the example of blur event:

<input ui-event="{ blur : 'blurCallback()' }">

<script> 
  $scope.blurCallback = function() {
   alert('Goodbye'); 
  }; 
</script>

If you don't want to use angular-ui's ui-event, you can also create a small directive until the next version of Angularis released.

app.directive('ngBlur', function() {
  return function( scope, elem, attrs ) {
    elem.bind('blur', function() {
      scope.$apply(attrs.ngBlur);
    });
  };
});

Just put the directive where you need it:

<input type="text" ng-model="foo" ng-blur="doFoo()" />

Basically what the directive does is to bind the blur event of the element (in our example the input) and then when the event is fired (we leave the input) angular will apply what is in the directive. So in our case, doFoo() will be fired if we leave the input.

Plunker here: http://plunker.co/edit/J4ZEB6ppvkiIvdW9J2VU?p=preview

Upvotes: 2

Mukund Kumar
Mukund Kumar

Reputation: 23211

you need to install ui-utils library for that: install this using following command:

$ bower install --save angular-ui-utils

add refrence to this library to index.html

<script type="text/javascript" src="app/bower_components/angular-ui-utils/modules/event/event.js"></script>

inject dependecy like this to main module:

angular.module('myApp', ['ui.event'])

html code :

<div ng-app="" ng-controller="testing" >
    <input ui-event="{ blur : 'blurCallback()' }">
</div>

controller code:

function testing($scope){
    $scope.blurCallback = function() {
    alert('Goodbye');
    };
}

Upvotes: 1

Mukund Kumar
Mukund Kumar

Reputation: 23211

use this html code:

<div ng-app="" ng-controller="testing" >
    <input ng-blur="blurCallback($event)">
</div>

Upvotes: 2

Related Questions