如何在指令中使用 $dirty 获得 ng-class? [英] How to get ng-class with $dirty working in a directive?

问题描述

我有以下 html，当使用 $dirty 更改输入时，它可以工作并更改 div 的类:

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

但是，当我尝试将其变成指令时，它的 ng-class 部分停止工作.谁能帮我让它工作?

指令:

 angular.module('myApp').directive('smartInputElement',function(){返回 {限制:'E'，要求:'ngModel'，编译:函数(元素，属性){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>

解决方案

Here is a plunker: http://plnkr.co/edit/3AFOHZFgExZKHjnd3gb0?p=preview

当你在 compile 函数中替换一个元素时，你应该:

• 手动编译&链接新模板.
• 终止同一元素上的所有指令.
• 查看此答案:使用 angularjs 创建新指令

指令:

app.directive('smartInputElement', function($compile) {返回 {限制:'E'，优先级:1001，终端:真的，编译:函数(tElm，attrs){var 模板 = angular.element('<div class="text-input" ng-class="{typing : (' + attrs.formname + '.' + attrs.name + '.$dirty || ' + attrs.formname + '.' +attrs.name + '.length > 0)}">'+'<跨度>'+ attrs.label + '</span>'+'<input type="text" name="' + attrs.name + '" ng-model="' + attrs.ngModel + '" placeholder="' + attrs.name + '">'+'</div>');tElm.replaceWith(模板);var fn = $compile(template);返回函数(范围){fn(范围)；};}};});

I have the following html which works and changes the class of the div when the input is changed using the $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>

However when I try and make this into a directive, the ng-class part of it stops working. Can anyone help me to get it working?

Directive:

 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>');
   }

 }

});

The html for the directive is:

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

解决方案

Here is a plunker: http://plnkr.co/edit/3AFOHZFgExZKHjnd3gb0?p=preview

When you replace an element inside the compile function you should:

• Manually compile & link the new template.
• Terminate all directives on the same element.
• Check this answer: creating a new directive with angularjs

Directive:

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);
      };

    }
  };
});

这篇关于如何在指令中使用 $dirty 获得 ng-class?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！