从 AngularJS 中的指令添加指令但保持 ng-model 绑定答案

【问题标题】：Add directives from directive in AngularJS but keep ng-model binded从 AngularJS 中的指令添加指令但保持 ng-model 绑定
【发布时间】：2017-03-28 15:14:22
【问题描述】：

在建议的答案中，存在 ng-model 未更新的问题，因为元素正在指令中编译。我所期望的是，在我更改选择选项后，ng-model 将绑定到所选项目，但事实并非如此。有什么办法可以解决吗？

Plunker：http://plnkr.co/edit/Tw1Pbt?p=preview

具体来说：

  <select ng-options="s for s in selects" ng-model="el" common-things>
  <option value=""></option>
</select>
{{el}}

这里 ng-model (el) 始终具有相同的值，无论我从 select 中选择什么选项

同样的问题是如果我在指令内有隔离范围，例如：

         <input type=text common-things ng-model="el.val"                otherdata="something"/>

我预计，当我在输入中写一些东西时，{{el.val}} 会有那个值，但它没有被更新。

【问题讨论】：

标签： javascript angularjs model-view-controller angular-directive

【解决方案1】：

您的附加指令为<select> 元素创建了一个新范围。由于JavaScript Prototype Inheritance，属性el 最终位于指令的范围内，而不是父控制器的范围内。这是一个常见的陷阱，也是在角度绑定中始终使用点的主要原因。

对此的快速解决方法是在主控制器上将el定义为一个对象，并设置该对象的一个属性。

$scope.el = {};
$scope.el.val=2;

<select ng-options="s for s in selects" ng-model="el.val" common-things>

Demo

【讨论】：

如果我在指令中有隔离范围怎么办。例如： HTML: 我想要，基于 otherdata 值添加多个指令。因此，我在 common-things 指令中隔离了范围，在这种情况下，ng-model (el.val) 不会在我在输入标签中写入内容时更新。
如果您在输入隔离上设置范围，那么即使您的selects 也不会绑定到该元素。如果需要隔离元素的范围，则管理该元素的指令必须对在该元素上使用的数据负责total；实现此目的的一种方法是将ng-model 绑定到指令中的scope。
我可以在没有孤立范围的情况下制作它吗？我想做的是：基于传递给指令的数据的属性（输入上的属性“其他数据”）我想向该字段添加其他指令。例如，如果 somedata.required=true，我想添加 my-required 指令。此外，我想在我的输入之后添加 html 标记并具有以下行为：如果某个函数（来自父范围）评估为真，我希望它显示出来。因此，我有孤立的范围，我不知道如何将带参数的函数传递给指令并在用户更改输入值时调用该函数
您似乎正试图过度设计此解决方案。 my-required 做了什么普通的required 做不到的？此外，如果您想要在输入后有一个跨度，那么您可能应该在 HTML 中单独使用跨度并使用ng-if 或ng-show。如果这些不起作用，您的下一个最佳选择是制作一个“包装”指令，并使用嵌入来包含 input 而无需将输入作为指令的实际目标。