Директива AngularJS для форматирования номера формата модели

Мне нужно поле ввода с маской, но я хочу, чтобы модель сохраняла маскированное значение.Директива AngularJS для форматирования номера формата модели

Номер телефона должен быть отображен и сохранен в формате db в таком формате: ## ## ## ## ##.

Я использую эту библиотеку: formatter.js в веб-приложении, и я стараюсь понять, что является лучшим способом использовать его с Angular для мобильного приложения.

Вот то, что я до сих пор:

Директива:

.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>

Я добавил скрипт в index.html:

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

Консоль возвращает:

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">

источник

2015-05-31 curuba

По умолчанию AngularJS не использует jQuery вообще, только его небольшой поднабор, называемый jqLite. Чтобы использовать плагины jQuery, вам также необходимо включить jQuery - я бы удостоверился, что вы это сделали. Не забудьте включить его (в index.html) до самого Angular, иначе он не будет распознан им, и он все равно будет использовать jqLite. – bardzusny

Хорошо, это была проблема !! Большое спасибо @bardzusny. Пожалуйста, напишите ответ, чтобы принять его. – curuba

По умолчанию AngularJS не использует JQuery, только его небольшую часть под названием jqLite:

Без полного JQuery вы не сможете использовать все плагины JQuery (как formatter.js).

К счастью, если включить JQuery в вашем index.html перед самой AngularJS - Угловой будет автоматически использовать его в качестве angular.element (вместо jqLite). Затем вы сможете получить доступ к полной функциональности jQuery, включая возможность использования своих плагинов.

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

Дополнительная информация: https://docs.angularjs.org/api/ng/function/angular.element.

источник

2015-05-31 13:06:11 bardzusny

У меня все еще есть проблема. Плагин корректно обновляет формат номера, но модель не отражается. Поэтому, когда я сохраняю это, мы не сохраняем новое значение. Как я должен справиться с этим? – curuba

Я думаю, что это материал для другого вопроса - как следует из названия («formatter»), вы просто форматируете значение при его отображении. Один из способов (хотя, вероятно, и не самый приятный) - это переформатирование значения, когда вам нужно его использовать, например, определение функции сервиса, принимающей исходное значение, возвращение форматированного. – bardzusny

Директива AngularJS для форматирования номера формата модели

ответ

Смежные вопросы