AngularJS directive to format model number format
I need a masked input field, but I want the model to keep the hidden value.
The phone number should be displayed and stored in db format, in this format: ## ## ## ## ##
.
I am using this library: formatter.js in a web app and I am trying to figure out what is the best way to use it with Angular for a mobile app.
Here's what I have so 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 added a script to index.html:
<script src="lib/formatter/dist/jquery.formatter.min.js"></script>
The console returns:
TypeError: element.formatter is not a function
at link (http://localhost:8100/js/directives.js:48:25)
at invokeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16855:9)
at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16365:11)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15714:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15717:13)
at publicLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15593:30)
at $get.boundTranscludeFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15732:16)
at controllersBoundTransclude (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16392:18)
at ngRepeatAction (http://localhost:8100/lib/ionic/js/ionic.bundle.js:33138:15)
at 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">
source to share
By default, the AngularJS function does not use jQuery, only a small subset of jqLite:
Without full jQuery, you won't be able to use any jQuery plugins (like formatter.js).
Fortunately, if you include jQuery in your index.html before AngularJS itself - Angular will automatically use it like angular.element
(instead of jqLite). You will then be able to access the full functionality of jQuery, including the ability to use your 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 .
source to share