AngularJS Two-way Data Binding in Nested Directives

Question

Please let me know if you need more information or want me to clarify anything. I have tried a lot of different things to figure this out but haven\'t found a solution.

Answer 1

The problem is caused by ng-switch, From the doc Understanding scope from git.

ng-switch scope inheritance works just like ng-include. So if you need 2-way data binding to a primitive in the parent scope, use $parent, or change the model to be an object and then bind to a property of that object. This will avoid child scope hiding/shadowing of parent scope properties.

so if you type some text in the textbox. below code will be executed for the ng-switch scope.

$scope.value="the text you typed"

So it will not consult the prototype chain to search value .this will created a new property for ng-switch scope.

How to testify it ?

If you change value to $parent.value. everything will work fine. because in the ng-switch for the primitive type (angularjs would recognize the value as primitive type if there is no dot )$parent will refer to formrow directive scope.

Try to remove the ng-switch or do as the doc says. the problem will disappear.

And more important, the document recommend us always use a dot . to refer the model when apply a bi-directional binding.

If I said something wrong . Please kindly correct me and make it right .thanks.