如何使用$ dirty在指令中使用ng-class？

Question

我有以下的HTML中工作，並使用$髒時，輸入被轉換更改類的div：

<div class="text-input" ng-class="{typing : (loginForm.test.$dirty || loginForm.test.length > 0)}"> 
    <span>Username</span> 
    <input type="text" name="test" ng-model="user.name" placeholder="test"> 
    </div> 

然而，當我試圖使之成爲一個指令，對納克級的部分原因它停止工作。任何人都可以幫助我得到它的工作？

指令：

angular.module('myApp').directive('smartInputElement',function(){ 
return { 
    restrict: 'E', 
    require: 'ngModel', 
    compile: function(element, attrs) { 
    element.replaceWith('<div class="text-input" ng-class="{typing : ('+attrs.formname+'.'+attrs.name+'.$dirty || '+attrs.formname+'.'+attrs.name+'.length > 0)}">'+ 
    '<span>'+attrs.label+'</span>'+ 
    '<input type="text" name="'+attrs.name+'" ng-model="ngModel" placeholder="'+attrs.name+'"></div>'); 
    } 

} 

}）;

的指令的HTML是：

<smart-input-element name="username" formName="loginForm" label="Username" ng-model="username"></smart-input-element> 

Answer 1

這裏是一個plunker：http://plnkr.co/edit/3AFOHZFgExZKHjnd3gb0?p=preview

當您更換編譯功能，您應該中的元素：

• 手動編譯&鏈接新的模板。
• 終止相同元素上的所有指令。
• 檢查這個答案：creating a new directive with angularjs

指令：

app.directive('smartInputElement', function($compile) { 
    return { 
    restrict: 'E', 
    priority: 1001, 
    terminal: true, 
    compile: function(tElm, attrs) { 
     var template = angular.element(
     '<div class="text-input" ng-class="{typing : (' + attrs.formname + '.' + attrs.name + '.$dirty || ' + attrs.formname + '.' + attrs.name + '.length > 0)}">' + 
     '<span>' + attrs.label + '</span>' + 
     '<input type="text" name="' + attrs.name + '" ng-model="' + attrs.ngModel + '" placeholder="' + attrs.name + '">' + 
     '</div>'); 

     tElm.replaceWith(template); 
     var fn = $compile(template); 
     return function(scope) { 
     fn(scope); 
     }; 

    } 
    }; 
});