Angular directive multiple inputs one model

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

I have many inputs which are bind to the same model, and I am filtering user input, when user press a denied key I wanted to show a toast to inform him that he can't use this symbol, but the count of toasts is equal to the count of inputs bind to the same model. I thought i'm working only with model which is one.

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

How can I fix that, or change the logic how it works

p.s. angular beginner

ThibaudL · Accepted Answer · 2015-08-20 09:10:55Z

2

If they are all bind to the same model every change in one is send to the others, so just put your directive on one input not all of them.

Here is a working plunkr : http://plnkr.co/edit/dI5TMHms2wsPHc9Xqewf?p=preview

using :

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

You can see in the console the message being displayed only once and from any input field

answered Aug 20, 2015 at 9:10

ThibaudL

1,0099 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Octavian Lari Over a year ago

Well, it's a nice solution, but I still can't apply it, because all inputs are generated by ng-repeat, it's a complex structure.

ThibaudL Over a year ago

ugly fix : add an hidden input with the directive and let all the others without. otherwise maybe it shouldn't be in a directive ? and just watch your model to add the toast ?

Octavian Lari Over a year ago

Yes, you are right, I switched $watch from directive to controller and now it's working as intended, big thanks!

Collectives™ on Stack Overflow

Angular directive multiple inputs one model

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related