Angular: Can anyone explain why transcluded content in a directive can only update objects on the scope - not variables directly on the scope. Is it just because the object and functions are ref type in javascript and why does the binding work one way and ... why does the binding break after the update inside the transcluded content (see plunker samples)
-
Plunker sample - variable on scope vs object on scope
Working -
Plunker sample - variable on scope
Transcluded content is like any other content, therefore if you followed the dot.rule
you'll be able to update the parent scope properties you want. Always follow the dot.rule
and refactor your logic to make sure everything is done in the angular way
.
Directives in angular prior to 2.0 version accept several types of scopes, the scope can be true
, which creates a new one and inherits parent's properties; false
, which does not create a new scope, but still inherit parent's properties; or {}
which is known as an isolated scope, this creates a new scope with zero properties, it keeps only the properties you declare.
Angular uses both, one-way and two-way data binding. For example, two-way data binding occurs when you use the ng-model
directive, whenever you update the model, the view will reflect those changes and viceversa. On the other hand, one-way data binding occurs when you use the interpolation {{some.property}}
The two-way data binding should not break if you are using the dot.rule
. That's how prototypical inheritance works after all.
Check out this Pen to illustrate everything said in this answer.