Menu
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');
};
}
781
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.
132
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
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
