Two way binding not working in directive with transcluded scope

Question

I\'ve a textbox in a controller which is bound to model name. There\'s a directive inside the controller and there\'s another textbox inside the directive which

Answer 1

I believe that the problem has to do with scoping. Initially the inner textbox doesn't have name set, so it is inherited from the outer scope. This is why typing in the outer box is reflected in the inner box. However, once typing in the inner box occurs, the inner scope now contains name which means it is no longer bound to the outer name so the outer text box doesn't sync up.

The appropriate way to fix is only storing models in the scope, not your values. I fixed it in http://jsfiddle.net/pdgreen/5RVza/ The trick is to create a model object (data) and referencing values on it.

The incorrect code modifies the scope in the directive, the correct code modifies the model in the scope in the directive. This subtle difference allows the scope inheritance to work properly.

I believe the way Miško Hevery phrased it was, scope should be write-only in the controller, and read-only in directives.

update: reference: https://www.youtube.com/watch?v=ZhfUv0spHCY#t=29m19s