繁体   English   中英

在窗体上嵌套指令。 AngularJS

[英]Nested directiv on Form. AngularJS

我无法弄清楚如何在AngularJS上进行适当的嵌套指令。

主题:我在ngModel模式上使用了指令创建了一个自定义。 然后,我想在我之前的新输入元素(伪指令)中使用top指令创建表单。

请问我没有使用正确的方法,嵌套指令不是一个好的答案。

angular
   .module('app')
   .directive('checkIp', [ 'appApiResource', function ( appApiResource)
     {
       return {
         require: 'ngModel',
         link: function (scope, elm, attrs, ctrl)
         {
           ctrl.$validators.checkip = function (model_value, view_value)
           {
            console.log(model_value);
              if (typeof model_value !== 'undefined' && appApiResource.isValideIp(model_value) )
              {
                return true;
              }
              else
              {
                return false;
              }
           };
         }
       };
     }] );

对于我的顶级控制器,这只是我的children指令内部的模板。

问题是我想将正确的格式和元素传递给我的指令:

<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine,  'has-success' : userForm.name.$valid && !userForm.name.$pristine }">
  <div class="input-group">
    <span class="input-group-addon">Search</span>
    <input type="text" name="name" class="form-control" ng-model="ngModel" check-ip="ngModel" required>
  </div>
  <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">Provide an IP</p>
</div>

我想我必须检查范围:{ngModel:“ =”}但我迷路了。

谢谢

找到我的解决方案:最高指令:

          return {
           scope: false,
           template: function(tElement, tAttrs)
            {
              var userformelem = tAttrs.userform+'.'+tAttrs.ngModel;
              console.log(userformelem);
              var html = '<div class="form-group" '+
              'ng-class="{ \'has-error\' : '+userformelem+'.$invalid && !'+userformelem+'.$pristine, '+
              ' \'has-success\' : '+userformelem+'.$valid && !'+userformelem+'.$pristine }">'+
                    '<div class="input-group">'+
                      '<span class="input-group-addon">Search</span>'+
                      '<input type="text" name="'+tAttrs.ngModel+'" class="form-control" ng-model="'+tAttrs.ngModel+'" wfw-check-ip="'+tAttrs.ngModel+'" required>'+
                    '</div>'+
                    '<p ng-show="'+userformelem+'.$invalid && !'+userformelem+'.$pristine" class="help-block">Provide an IP</p>'+
                  '</div>'
              return html;
            }
       };

HTML在哪里:

<input-ip userform="userForm" ng-model="ip" ></input-ip>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM