Angular директива несколько входов одна модель

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< /а>

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

p.s. угловатый новичок


angularjs angularjs-directive angularjs-model
person Octavian Lari    schedule 20.08.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

Вот рабочий планкр: 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" />

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

person ThibaudL    schedule 20.08.2015
comment
Ну, это хорошее решение, но я все еще не могу его применить, потому что все входные данные генерируются ng-repeat, это сложная структура. - person Octavian Lari; 21.08.2015
comment
уродливое исправление: добавить скрытый ввод с директивой и оставить все остальные без. в противном случае, может быть, это не должно быть в директиве? и просто смотреть вашу модель, чтобы добавить тост? - person ThibaudL; 21.08.2015
comment
Да, вы правы, я переключил $watch с директивы на контроллер, и теперь он работает как задумано, большое спасибо! - person Octavian Lari; 21.08.2015