Угловая директива множественных входов одной модели

0

HTML:

<html ng-app="app">
<div class="container" style="margin-top: 30px">
  <input type="text" ng-model="newName" key-filter/>
  <input type="text" ng-model="newName" key-filter/>
  <input type="text" ng-model="newName" key-filter/>
  <input type="text" ng-model="newName" key-filter/>
</div>
</html>

JS:

var app = angular.module('app', []);
app.directive('keyFilter', function() {
  var pattern = /([\s !$%^&*()_+|~='{}\[\]:";'<>?,.\/])/;
  function link(scope) {
    scope.$watch('model', function() {
      if(scope.model === undefined)
        return
      if(pattern.test(scope.model)) {
        scope.model = scope.model.replace(pattern, '');
        Materialize.toast('Denied symbol', 4000, 'rounded');
      }
   });
  }
  return {
    restrict: 'A',
    scope: {
      model: '=ngModel'
    },
    link: link
  }
});

У меня много входных данных, которые привязаны к одной и той же модели, и я фильтрую пользовательский ввод, когда пользователь нажимает отрицательный ключ, я хотел показать тост, чтобы сообщить ему, что он не может использовать этот символ, но количество тостов равно к количеству входов привязывается к одной и той же модели. Я думал, что работаю только с одной моделью.

Пример здесь: http://codepen.io/anon/pen/XbLjVY?editors=101

Как я могу это исправить или изменить логику, как это работает

ps угловой новичок

Теги:
angularjs-directive
angularjs-model

1 ответ

1
Лучший ответ

Если все они привязаны к одной и той же модели, каждое изменение в одном отправляется другим, поэтому просто введите свою директиву на один вход не все из них.

Вот рабочий plunkr: http://plnkr.co/edit/dI5TMHms2wsPHc9Xqewf?p=preview

с помощью:

  <input type="text" ng-model="newName" key-filter/>
  <input type="text" ng-model="newName" />
  <input type="text" ng-model="newName" />
  <input type="text" ng-model="newName" />

Вы можете видеть в консоли сообщение, отображаемое только один раз и из любого поля ввода

Поделиться
  • 0
    Ну, это хорошее решение, но я все еще не могу его применить, потому что все входные данные генерируются с помощью ng-repeat, это сложная структура.
  • 1
    некрасивое исправление: добавьте скрытый ввод с помощью директивы и оставьте все остальные без. в противном случае, возможно, это не должно быть в директиве? и просто смотреть свою модель, чтобы добавить тост?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню