Angular 指令多个输入一个模型

Question

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
  }
});

我有很多绑定到同一个模型的输入，我正在过滤用户输入，当用户按下一个被拒绝的键时，我想祝酒词告诉他他不能使用这个符号，但是toasts 的计数等于绑定到同一模型的输入的计数。我以为我只使用一个模型。

这里的例子： http://codepen.io/anon/pen/XbLjVY?editors=101

我怎样才能解决这个问题，或者改变它的工作逻辑

p.s。 angular初学者

Answer 1

如果它们都绑定到同一个模型，其中一个的每个更改都会发送给其他模型，因此只需将指令放在一个输入上而不是所有输入上。

这是一个有效的插件： 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" />

您可以在控制台中看到消息只显示一次并且来自任何输入字段

Angular 指令多个输入一个模型

Angular directive multiple inputs one model

angularjs

angularjs-directive

angularjs-model