Directives and scope

Page 1

An Angular directive inherits its parent's scope by default.

Modify the scope of the directive using the property 'scope' in the directive object.

scope : false

- This is the default. The directive does not create a new scope, it just uses the parent one.

- There is no inheritance but this is not generally a good way of creating re-usable components

scope : true

- Directive has a new scope which prototypically inherits from the parent scope

- If more than one directive (under the same parent) requests a new scope, only one scope will be created. (As you would expect: all models should be in sync across duplicate directives)

- Be wary of two way data-binding to primitives in the parent scope (do not inherit from primitives in the parent scope as data binding will not work).

scope : {}

- Creates new scope, nothing inherited from parent

Inheriting distinct items from parent

$scope.car = {type : 'hyundai', doors : 3}

// Cannot insert html due to idiocy from GoConqr

you need to create an attribute on the element:

carProperty=car // Note no quotes around car. car can be an object.

scope : {localProperty : '=car-property'} // Two directional binding with car object

attribute on element :

car-name="{{car.name}}"

scope : { carName : '@carName' } // Only inherits a string!! Not two way binding!

attribute on element:

sayhelloFunction='sayHelloThere()'; // sayHello() is function in the parent scope

scope : { sayHello : '&sayHelloFunction'}

// Now if you call sayHello in the directive, sayHelloThere will be called in the parent