1 of 19

Directives and scopes

2 of 19

Scopes

  • A scope is an execution context
  • Scopes are hierarchical replicating the DOM
  • The root of the scope structure is rootScope
  • An application has one rootScope, which can function as global state, even though there are alternatives

3 of 19

Scopes

  • In principle, scopes inherit their parent scopes (through prototypical inheritance)
  • An exception are isolate scopes which can only access themselves
  • Scopes serve to transmit model data between the controller and the view and loosely play the role of a view-model

4 of 19

Scopes

  • Objects on the scope are two-way bound, in the sense that any alteration of their value in the view is visible on the controller and any alteration in the controller is visible in the view

5 of 19

Scope functions

  • $watch - adds a watch which is a piece of behaviour to be executed on the change of a model value
  • $apply - triggers a digest cycle which allows the application to react to changes which have been produced outside it

6 of 19

Directives

  • Directives are elements, attributes etc. which decorate existent DOM elements
  • Directives can add supplementary DOM elements or add behaviour to existent ones
  • Effectively, directives are processed by the AngularJs HTML compiler

7 of 19

Directives

  • Angular JS is itself represented by a series of directives
  • We can implement custom directives in order to achieve various effects

8 of 19

Directive names

  • The name of directives is normalized
  • The normalized name is written camel case with no additional prefix
  • Steps
    • The data- or x- prefix is eliminated
    • Names in _,- or : notation are converted to camel case

9 of 19

Directive names

  • The following names represent the same directive (ngMisc):
    • ng:misc
    • data-ng-misc
    • x_ng_misc
  • When defined directive names will be written in camel case, but when used they can be written in any normalizable form

10 of 19

Using directives

  • Directives can be used as separate elements, attributes on existent elements, css classes or comments
  • As a rule, directives are used as elements of attributes

​

11 of 19

Bindings

  • Angular checks attribute text in order to replace possible bound values (through $compiler)
  • For attributes with possible name conflicts ngAttr can be used
  • Bound values are updated via watches (custom event handlers to be run on changes can be registered)

12 of 19

Directive template

  • Add html code to the DOM
  • Can use any variable from the visible scope
  • The visible scope is the scope of the controller for the context in which the directive was used
  • Both internal and external templates can be used

13 of 19

Directive template

  • The external file can be specified as a string, be it a string literal or the result of a function returning a string
  • In the second case, the function generating the name does not have access to the scope

14 of 19

Directive type

  • Typically, directives are used as attributes or elements
  • This behaviour can be modified via the restrict option
    • A - only attribute
    • E - only element
    • C - only class

15 of 19

Directives with isolate scope

  • When having access to the current scope, directives are dependent on what the controller supplies
  • The directive scope can be isolated in order to make it reusable
  • If the directive needs supplementary information, it can be sent via attributes

16 of 19

Directives with isolate scope

  • If the scope is isolated, the directive will only have access to the elements which have been explicitly put on the scope
  • Normally, a scope has a parent scope in its prototype, but for isolate scopes no information about the containing scope is present

17 of 19

Link functions

  • Directivs which specify a link function can manipulate the dom
  • The link function has the following parameters:
    • scope allows access to the scope visible to the directive
    • element is the element on which the directive was used
    • attrs is a series of key value pairs containing the attributes accessible to the directive

18 of 19

Wrapper directives

  • An isolate scope has access only to the external values which have been explicitly copied from the external scope
  • An isolate scope can be created over the external scope with the transclude option

19 of 19

Wrapper directives

  • In this case, the directive creates its own scope which does not modify the external scope and uses a copy of it
  • This style of directive is not dependent on its own content

​