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
Post a Comment