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

一尘不染

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

angularjs

我有以下html可以使用$ dirty更改输入时起作用并更改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>

但是，当我尝试将此变为指令时，它的ng-class部分停止工作。谁能帮助我使其正常运行？

指示：

 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>

阅读 269

2020-07-04

共1个答案

一尘不染

这是一个小矮人：http
://plnkr.co/edit/3AFOHZFgExZKHjnd3gb0?p=preview

在替换compile函数中的元素时，您应该：

手动编译并链接新模板。
终止同一元素上的所有指令。
检查此答案：使用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);
      };

    }
  };
});

2020-07-04