如何在指令中传递 ng-model 对象而不是值？答案

【问题标题】：How pass a ng-model object instead of a value inside of a directive?如何在指令中传递 ng-model 对象而不是值？
【发布时间】：2015-12-11 16:48:42
【问题描述】：

我创建了一个输入指令以在多个表单中使用它，所以我需要在提交表单时传递一个 ng-model 对象而不是指令内的值。

这里是代码

HTML：

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

指令：

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

输出html：

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

我需要这个输出：

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

¿这可能吗？

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-ng-model

【解决方案1】：

在你的指令中使用“require”。

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

另外，在控制器中定义参数。第四个参数将是 ngModelCtrl 是 ngModel 指令的控制器，您可以在其中获取您的值。

您需要定义“链接”函数来接受 ngModel 的控制器。

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

并在链接函数中获取值并传递给指令的控制器。

如果 ngModel 的要求是可选的，例如你可以不用它——使用'?ngModel'。

【讨论】：