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

Question

此问题链接到以下问题:

Add directives from directive in AngularJS

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

笨蛋: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}} 会有那个值，但它不会被更新。

Answer 1

您的附加指令为 <select> 创建了一个新范围元素。由于 JavaScript Prototype Inheritance , 属性(property) el结束于指令的范围而不是父 Controller 的范围。这是一个常见的陷阱，也是总是在 Angular 绑定(bind)中使用点的主要原因。

对此的快速修复是定义 el在主 Controller 上作为对象，并设置对象的属性。

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

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

Demo