當我在$ provide.decorator中更改了輸入值時，爲什麼我的角度表格不髒？

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> 

由於這些代碼，我想造成這樣的：在我的控制器的$ scope.amount將888當我點擊輸入元件。 現在，它真的工作，但$ scope.simpleForm和$ scope.simpleForm.times仍然是原始的。 $髒屬性仍然是錯誤的。

我很困惑，爲什麼那樣？

我需要幫助。謝謝大家 。

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這樣你就可以試試它...