javascript - AngularJS directive to force a number format to the model -


i need input field mask want model keep masked value.

phone number should displayed , stored in db in format: ## ## ## ## ##.

i using library: formatter.js on web app , try understand best way use angular mobile app.

here have far:

directive:

.directive('curubatelephone', function () {     return {         restrict: 'ac',         replace: false,         link: function (scope, element) {             element.formatter({                 'pattern': '{{99}} {{99}} {{99}} {{99}} {{99}}',                 'persistent': false             });         }     } }) 

html:

    <label class="item item-input item-stacked-label">         <span class="input-label">fixe</span>         <input type="text" placeholder="fixe" ng-model="fonction.perso_fixe" class="curubatelephone">     </label> 

i have added script in index.html:

<script src="lib/formatter/dist/jquery.formatter.min.js"></script> 

the console returns :

typeerror: element.formatter not function     @ link (http://localhost:8100/js/directives.js:48:25)     @ invokelinkfn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16855:9)     @ nodelinkfn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16365:11)     @ compositelinkfn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15714:13)     @ compositelinkfn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15717:13)     @ publiclinkfn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15593:30)     @ $get.boundtranscludefn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15732:16)     @ controllersboundtransclude (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16392:18)     @ ngrepeataction (http://localhost:8100/lib/ionic/js/ionic.bundle.js:33138:15)     @ object.$watchcollectionaction [as fn] (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22746:13) <input type="text" placeholder="fixe" ng-model="fonction.perso_fixe" class="curubatelephone ng-pristine ng-untouched ng-valid"> 

by default, angularjs not using jquery, small subset called jqlite:

without full jquery won't able use jquery plugins (like formatter.js).

luckily, if include jquery in index.html before angularjs - angular automatically use angular.element (instead of jqlite). you'll able access full jquery functionality - including possibility use plugins.

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script> 

more information: https://docs.angularjs.org/api/ng/function/angular.element .


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -