1

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

同じモデルにバインドされている多くの入力があり、ユーザー入力をフィルタリングしています。ユーザーが拒否されたキーを押したときに、トーストを表示して、このシンボルを使用できないことを通知したかったのですが、トーストの数は同じです同じモデルにバインドする入力の数に。私は1つのモデルでのみ作業していると思いました。

例: http://codepen.io/anon/pen/XbLjVY?editors=101

どうすればそれを修正できますか、またはロジックがどのように機能するかを変更できます

ps角初心者

4

1 に答える 1

2

それらがすべて同じモデルにバインドされている場合、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" />

コンソールで、メッセージが一度だけ表示され、任意の入力フィールドから表示されていることを確認できます

于 2015-08-20T09:10:55.437 に答える