why my angular form is not dirty when I have changed inputs value in my $provide.decorator?

Question

I want extend the default inputDirective in angular.so I wrote these code:

module.config(function($provide){
    $provide.decorator('inputDirective',function($delegate){
       var directive = $delegate[0];
       var originalLink = directive.link;
       directive.compile=function(ele,attr,transclude){
          return function(scope,ele,attr,contr){
            ele.on('click',function(){
                scope.amount=888;
            })
            originalLink.apply(this,arguments);
            return originalLink;
          }
       }
    })
})


<form name='simpleForm'>
  <input name='times' ng-model='times'/>
</form>

Since these code,I want result like that:The $scope.amount in my controller will be 888 when I click the input element. Now,It really worked,But the $scope.simpleForm and $scope.simpleForm.times still are pristine. The $dirty attributes still are false.

I'm so confused,Why like that?

I need help . Thank you everybody .

Answer 1

First, I'm not sure if your code could work : the link function should be output from the compile function. Then, I think you are using jQuery. With jQlite (shipped with AngularJS's vanilla version), you have to bind your event with bind.

Finally, the $dirty flag is working out of the box : it becomes true when you start typing in the input :)

HTML part :

<div>
  <form name='simpleForm'>
    <input name='times' ng-model='times'/>
    <p ng-show="simpleForm.times.$dirty">Is dirty !</p>
  </form>
</div>

JS part :

var myApp = angular.module('myApp',[]);

myApp.config(function($provide){
    $provide.decorator('inputDirective',function($delegate){
       var directive = $delegate[0];
       var compileFn = directive.compile;
       directive.compile=function(ele,attr,transclude){
            var linkFn = compileFn.apply(this, arguments);
          return function(scope,ele,attr,contr){
          //debugger;
            ele.bind('click', function() {
                    // debugger;
                alert('ok');
            });
            linkFn.apply(this,arguments);
            return linkFn;
          }
       }
       return $delegate;
    })
})

PS: I jsfiddled the code so that you can try it ...