Reusable directive in AngularJS

Question

I have a directive which takes an event when a change is detected in an input, I would like to create many inputs with the same directive.

For example:

  <body ng-controller="MainCtrl">
    <input ng-model='val'  caret="2"><br/>
    <input ng-model'"val2' caret="2"><br/>
    <input ng-model'"val3' caret="2"><br/>
    <input ng-model'"val4' caret="2"><br/>
     ....
    <input ng-model'"valn' caret="2"><br/>
  </body>

The problem is that the first parameter of scope.$watch is the model name. How can I make the scope.$watch work with dynamic inputs?.

Chandermani · Accepted Answer · 2014-03-25 04:01:15Z

1

Change this line

scope.$watch('val', function(newValue, oldValue) {

to

scope.$watch(attrs.ngModel, function(newValue, oldValue) {

and it would work. You put a watch on attribute value for ng-model

see my plunkr http://plnkr.co/edit/U8An4LJwzneZWv2nUNCT?p=preview

answered Mar 25, 2014 at 4:01

Chandermani

42.7k12 gold badges87 silver badges89 bronze badges

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

1 Comment

JohnPortella Over a year ago

Hi, thanks for your help, but it doesn't print all the models that use the directive. In this example (plnkr.co/edit/aqJzrqAgrJZ6cjdtatlr?p=preview) , it prints Val5 , but the others doesn't print.

Collectives™ on Stack Overflow

Reusable directive in AngularJS

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related