Geek Answers Handbook

AngularJS: simple blur function

I am new to AngularJS. Studied at W3school. Now we move forward to know how the blur function ui-eventworks with other sites. So I got this code that does not work, tell me the reason or the best way to call the 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');
    };
}
+4
source share
5 answers

I suggest using ngBlurAngularJS in the field.

This directive became available from version 1.2 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 have added JSFiddle for you.

If you want to use the library UI.Utils, you must enter the module 'ui.utils'into 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 Plunker using UI.Utils.

+13

html-:

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

Angular UI @http://angular-ui.imtqy.com/ui-utils/, Blurs, Focus, Double-Clicks Angular Js

:

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

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

angular -ui ui-event, , Angularis.

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

, :

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

, , ( ), , ( ) Angular , . doFoo() , .

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

0

ui-utils : , :

$ bower install --save angular-ui-utils

refrence index.html

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

dependecy, , :

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

html-:

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

:

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

, (angular -ui).

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

Do not worry! "$ Scope" and all angular will be there! However, I used the function call as an “expression” to “ng-blur” in another case, and it works too! Why sometimes the riddle does not work for me (no error messages)! In any case, it was the "last resource" and works great for me!

Enjoy it!

0
source

More articles:


All Articles