Posted over 4 years ago. Visible to the public. Draft.

Angular: Understanding how parent and child scope meet on a directive declaration

This cards needs to be rewritten.

Say you have the following markup:

{{ someParentVariable = 42 }} <child var="{{ someParentVariable }}" ng-click="foo()"> {{ var }} </child>

Any angular expression on the child element will be evaluated
before child is initialized. Hence, {{ }} is always evaluated in the
parent scope. will be "42" inside the child directive
(as a string, because HTML attributes are always strings).

scope: true

If the child directive sets scope:true, a new child scope is
attached to the directive's element. It is available to any
other Angular expression on that element
. ngClick will invoke
the foo() function that the child directive defines.

scope: {}

Now assume the child directive defines an isolate scope. This isolate
scope will be truly isolate and not accessible to other Angular
expressions or directives on that element
. See this Stackoverflow
, section "Breaking Change" (Angular 1.2+). ngClick will
invoke the foo() function defined on the parent scope.

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Owner of this card:

Dominik Schöler
Last edit:
about 3 years ago
by Besprechungs-PC
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more