Search code examples
angularjsangularjs-scopeusing-directivesangularjs-ng-transclude

Angular scope modification inside transcluded content


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


Solution

  • Transcluded content can also update parent's scope properties

    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.

    Directive scope types

    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.

    One-Way vs Two-Way data binding

    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.