javascript - AngularJS - Apply directive instantly, formating currency -
ok have following directive on various input elements. of elements on modals current method doesn't work how want, should apply right before modal opens.
crtpromodir.directive('ngformatcurr', ['$filter', function($filter) { function link(scope, element, attrs) { element.blur(function() { element.val($filter('currency')((element.val() || 0), '', 2)); }); }; return { link: link }; }]);
so how can apply filter instantly , every time changes?
solution mccainz:
crtpromodir.directive('ngformatcurr', ['$timeout', '$filter', function($timeout, $filter) { return { link: function(scope, element, attrs) { $timeout(function() { element.val($filter('currency')((element.val() || 0), '', 2)); }); element.blur(function() { element.val($filter('currency')((element.val() || 0), '', 2)); }); } }; }]);
to initialize filter change code such filter runs in link function. not try modify value filter on every keypress/change though frustrate user.
updated initialize on $timeout filter applied after angular compilation. added keypress handler , code such filter apply after 2 seconds of keypress. don't recommned addresses issue of having value filter user types, giving 2 second delay after users keypress before filter apply.
http://plnkr.co/edit/nqb12vgs3mwttg4ilitw?p=preview
<!doctype html> <html> <head> <script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script> <script data-require="angular.js@1.4.0-rc.1" data-semver="1.4.0-rc.1" src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body ng-controller = "cntrl"> <h1>hello plunker!</h1> <input ng-model="val" ng-format-curr="" /> <script> var crtpromodir = angular.module("crtpromodir",[]); var app = angular.module("cntrl",[]); app.controller("cntrl",function($scope){ $scope.val = 2234; }); crtpromodir.directive('ngformatcurr', ['$filter','$timeout', function($filter,$timeout) { function link(scope, element, attrs) { var promise; $timeout(function(){ element.val($filter('currency')((element.val() || 0), '', 2)); }); element.keypress(function(){ if(angular.isundefined(promise)){ promise = $timeout(function(){ element.val($filter('currency')((element.val() || 0), '', 2)); },2000); } else{ $timeout.cancel(promise); promise = undefined; } }); element.blur(function() { element.val($filter('currency')((element.val() || 0), '', 2)); }); }; return { link: link }; }]); angular.bootstrap(document,["crtpromodir","cntrl"]); </script> </body> </html>
Comments
Post a Comment