How pass a ng-model object instead of a value inside of a directive?

Question

I made an input directive to use it in multiples forms, so I need to pass a ng-model object instead of a value inside of a directive at submitting form.

Here is the code

HTML:

<form name="formo" novalidate ng-submit="saveOrganization(org)">
....
      <responsible-select model="org.collaborators" show="1" id="id" adding="0" ></responsible-select>
....
</form>

Directive:

angular.module('app').
   directive('responsibleSelect', function() {
    return {
      restrict: 'E',
      scope: {
        model :"=",
        show : '=',
        id : '=',
       adding : '='
      },
     controller: 'findCollabOrResCtrl',
     template: '<ui-select ng-model="model" reset-search-input="true"     tagging="tagTransform" multiple theme="bootstrap">'+
               '<ui-select-match placeholder="Escribe los emails de los colaboradores del área" >'+
              '{{$item.email}}'+
              '</ui-select-match>'+
              '<ui-select-choices refresh="refreshCollaborator($select.search,{{ show }},{{ id }},{{ adding }} )"refresh-delay="0" repeat="collaborator.email as   collaborator in collaborators">'+
             '{{collaborator.email}} '+
             '</ui-select-choices>'+
             '</ui-select>'
};
});

Output html:

<responsible-select model="org.collaborators" show="1" id="1" adding="0" class="ng-isolate-scope">
       <div ng-model="model" >...</div>
</responsible-select>

I need this ouput:

<responsible-select model="org.collaborators" show="1" id="1" adding="0" class="ng-isolate-scope">
     <div ng-model="org.collaborators" >...</div>
</responsible-select>

¿is this possible?

Answer 1

Use "require" for your directive.

angular.module('app').
   directive('responsibleSelect', function() {
    return {
      restrict: 'E',
      require: 'ngModel'
      scope: {
        model :"=",
        show : '=',
        id : '=',
       adding : '='
      },
     controller: 'findCollabOrResCtrl',
     template: '<ui-select ng-model="model" reset-search-input="true"     tagging="tagTransform" multiple theme="bootstrap">'+
               '<ui-select-match placeholder="Escribe los emails de los colaboradores del área" >'+
              '{{$item.email}}'+
              '</ui-select-match>'+
              '<ui-select-choices refresh="refreshCollaborator($select.search,{{ show }},{{ id }},{{ adding }} )"refresh-delay="0" repeat="collaborator.email as   collaborator in collaborators">'+
             '{{collaborator.email}} '+
             '</ui-select-choices>'+
             '</ui-select>'
    };
});

Also, define paramethers in your controller. Fourh paramether will be ngModelCtrl what is controller of ngModel directive where you can get your value.

You'll need to define 'link' function to accept ngModel's controller.

link: function ($scope, $element, attrs, ngModelCtrl)

And in link function get value and pass to directive's controller.

If requirement of ngModel is optional, eg you can go without it - use '?ngModel'.