如何获得NG-类$脏的指令工作？ [英] How to get ng-class with $dirty working in a directive?

问题描述

我有以下的HTML中工作，当输入使用更改更改类的div $脏：

 ＆LT; D​​IV CLASS =文字输入NG-CLASS ={打字：（loginForm.test $脏|| loginForm.test.length大于0）} ＆GT;
  ＆LT;跨度＆GT;用户名和LT; / SPAN＆GT;
  ＆LT;输入类型=文本名称=测试NG-模式=user.name占位符=测试＆GT;
  ＆LT; / DIV＆GT;
 

然而，当我试图使成指令这一点，它的NG-类部分停止工作。谁能帮我得到它的工作？

指令：

  angular.module（'对myApp'）。指令（smartInputElement'，函数（）{
 返回{
   限制：'E'，
   要求：'ngModel'，
   编译：功能（元素，ATTRS）{
   '。''。$脏||'''：; element.replaceWith（'＆LT DIV CLASS =文字输入NG-CLASS ={打字（'+ attrs.formname + + attrs.name + + + attrs.formname + attrs.name +。长度大于0）}＆GT;'+
  '＆LT;跨度＆GT;'+ attrs.label +'＆LT; / SPAN＆GT;'+
  '＆LT;输入类型=TEXTNAME =+ attrs.name +'NG-模式=ngModel占位符=+ attrs.name +'＆GT;＆LT; / DIV＆GT;'）;
   } }
 

}）;

有关指令的HTML是：

 ＆LT;智能输入元素名称=用户名表格名称=登录表单标签=用户名NG模型=用户名＆GT;＆LT; /智能输入 - 组件＆gt;
 

解决方案

下面是一个plunker：的 http://plnkr.co/edit/3AFOHZFgExZKHjnd3gb0?p=$p$pview

当您更换编译功能中的元素，你应该：

• 手动编译和放大器;链接新模板。


• 终止所有指令在相同的元素。


• 检查这个答案：<一href=\"http://stackoverflow.com/questions/21315312/creating-a-new-directive-with-angularjs/21317635#21317635\">creating与angularjs
新指令

指令：

  app.directive（'smartInputElement'，函数（$编译）{
  返回{
    限制：'E'，
    优先级：1001
    终端：真实，
    编译：功能（tElm，ATTRS）{
      VAR模板= angular.element（
        '＆LT; D​​IV CLASS =文字输入NG-CLASS ={类型：（'+ attrs.formname + + attrs.name + + + attrs.formname +'。''$脏||''。 attrs.name +。长度大于0）}＆GT;' +
        '＆LT;跨度＆GT;' + attrs.label +'＆LT; / SPAN＆GT;' +
        '＆LT;输入类型=TEXTNAME =+ attrs.name +'NG-模式=+ attrs.ngModel +'占位=+ attrs.name +'＆GT;' +
        '＆LT; / DIV＆GT;'）;      tElm.replaceWith（模板）;
      变种FN = $编译（模板）;
      复位功能（适用范围）{
        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);
      };

    }
  };
});

这篇关于如何获得NG-类$脏的指令工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！