Bindings from parent->child work differently for object

[oliver-batchelor]

Using a transclude directive we have

1. A binding to a value 'someVar'
2. A binding to a value in an object 'data.someVar'

We have a textbox inside a transclude which is bound, and bind the value inside and outside the transclude for display.

In the first case we lose the binding between the two scopes as soon as we type text into the text box.

In the second case the binding is retained.

http://jsfiddle.net/Saulzar/pnSNj/12/

<wrap title="set someVar">
  <input type="text" ng-model="someVar">
  <p>Inside wrap: {{ someVar }} </p>
</wrap>
<p>Outside wrap: {{ someVar }}</p>   

C1 = function ($scope){
$scope.someVar = "Hello world";
$scope.data = {someVar: "Hello world"};
};

[mhevery]

This is working as expected. Transclusion creates new scope. Doing 2 way data-binding on scope is not recommended specifically because of such behavior.

[witoldsz]

Hi Misko,
can you elaborate a little bit more on the problem? You say it is not recommended to do a 2-way data binding on a scope, but there is no binding to the scope in the example, is there?

Here is the discussion on the subject:
https://groups.google.com/forum/#!topic/angular/45jNmQucSCE/discussion

And this a simplified example with description how to reproduce the issue:
http://jsfiddle.net/witoldsz/pnSNj/14/

[mhevery]

The above is an issue, since it binds directly to the scope. The issue is when you insert a scope creating directive in around the input.

This does not suffer from the same issue. Since the model will always be read from the right scope and then the assignment will happen always on the same instance of the model. No matter how many scopes you wrap the input in it will work as expected.

Example contains ng-model hence 2way data binidng

[witoldsz]

I see, it is related to #943, isn't it?
If so, would that be possible to let some directives work in a way that the inner part of a directive would not create a transcluded scope (which inherit from outer scope), but use the outer one instead? Like this:
-- this is scope X
<some-directive>
-- we are inside directive
-- this is scope X as well
</some-directive>

[nicola]

So how can this be made possible?
(that scopes of transcludes influence the parent scope)

[witoldsz]

As Misko said, you are out of troubles once you stop binding directly to scope. This is not the way the AngularJS was specifically designed, this is how JavaScript inheritance works.

[iammerrick]

When people say not to bind directly to scopes isn't that exactly what a two way data binding is? Or do you mean don't bind on the $scope because objects are references therefore for consistent behavior always bind to an object that is on the scope?