Как получить ng-класс с грязной работой в директиве?

У меня есть следующий html, который работает и меняет класс div при изменении ввода с помощью $dirty:

<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>

Однако, когда я пытаюсь сделать это в директиве, часть его ng-класса перестает работать. Может ли кто-нибудь помочь мне заставить его работать?

Директива

 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>

Ответ 1