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

Question

This question is linked to following question:

Add directives from directive in AngularJS

In suggested answer, there's problem that ng-model is not updating because element is being compiled in directive. What I expected is that, after I change select option, ng-model will be binded to selected item, but it's not. Is there any way to fix it?

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}}

Here ng-model (el) has always same value, no matter what option I choos from select

Same problem is if I have isolated scope inside directive, for instance:

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

I eexpect, as I write something inside input, that {{el.val}} would have that value, but it's not being updated.

Answer 1

Your additional directive creates a new scope for the <select> element. Due to JavaScript Prototype Inheritance , the property el ends up on the directive's scope rather than the parent controller's scope. This is a common pitfall, and a major reason to always use a dot in angular bindings .

The quick fix for this is to define el on the main controller as an object, and set a property of the object.

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

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

Demo