在窗体上嵌套指令。 AngularJS

Question

I cant figure out how to make a proper nested directive on AngularJS.

Subject: I created a custom using directive on ngModel pattern. Then, I want to create a top directive to create a form, using inside my previous new input element (directive)

Perhpase I'm not using hte proper way, and nested directive is not the good answere.

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

For my top controller, it's only a template with inside my children directive.

The probleme is i want to pass the correct form & element to my directive :

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

I guess I have to check in scope: { ngModel: "=" } but I'm lost.

Thanks

Answer 1

Found my solution : Top directive :

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

Where HTML is:

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