javascript - handling focus and blur event in angular 1.5 component -
recently working in angular js project. happens face situation in need handle focus , blur events textbox. scenario need append $ sign when focus out textbox , append $ when textbox focused.
i tried create component that
angular.module('myapp').component('dollartext', { templateurl: '<input type="text">', controller: function($scope, ielm, iattrs){ ielm.bind('change', function(){ ielm.val('$'+ielm.val()); }); } });
but cant access focus event. know not doing correct. how can trigger both focus , blur in angular component. angular component best choice task.
if want handle div
or other, example, in ng-repeat
or in long list of element, need use function(this)
, on javascript side need use function(context)
interact element.
here's working plunker of suppose looking for.
html:
<html ng-app="myapp"> <body ng-controller="mycontroller"> <!--when on-blur, call blur(this), when on-focus, call focus(this)--> <input type="text" name="myapplicationrocks" ng-focus="focus(this)" ng-blur="blur(this)"/> <!-- content changes on blur , on focus--> <h1>{{whattowrite}}</h1> </body> </html>
js:
var myapp = angular.module('myapp', []); myapp.controller('mycontroller', function($scope){ $scope.whattowrite = "well, try something"; $scope.focus = function(context){ console.log("on focus"); context.whattowrite = "focus on!"; }; $scope.blur = function(context){ console.log("on blur"); context.whattowrite = "blur on!"; }; });
of course work without this
, context
in situations useful.
i hope i've been helpful.
Comments
Post a Comment