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

Question

这个问题与以下问题有关：

Add directives from directive in AngularJS

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

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

Specificly：

  <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}}将具有该值，但它没有被更新。

Answer 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