为什么当我更改 $provide.decorator 中的输入值时，我的 angular 表单没有变脏？

Question

我想扩展 angular.so 中的默认 inputDirective 我写了这些代码：

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>

由于这些代码，我希望当我单击输入元素时，我的控制器中的结果如 that:The $scope.amount 将是 888。现在，它确实有效，但是 $scope.simpleForm 和 $scope.simpleForm.times 仍然是原始的。 $dirty 属性仍然是 false。

我很困惑，为什么这样？

我需要帮助。谢谢大家。

Answer 1

首先，我不确定您的代码是否可以工作：link 函数应该从 compile 函数输出。那么，我认为你正在使用 jQuery。使用 jQlite（随 AngularJS 的原始版本一起提供），您必须将事件与 bind.

绑定

最后，$dirty 标志开箱即用：当您开始输入时它变成 true:)

HTML 部分：

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

JS 部分：

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 这样你就可以试试了...

为什么当我更改 $provide.decorator 中的输入值时，我的 angular 表单没有变脏？

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

javascript

directive

angularjs