AngularJS - Introductions to Directives

Preview:

DESCRIPTION

Introductions to Directives - common things

Citation preview

Egor Miasnikov 1

Intro

Custom directive structure

Restrict

Template

Replace

Scope

Transclude

Link

Compile

Bootstrap UI examples

2

<body>

<my-awesome-site></my-awesome-site>

</body>

3

app.directive(‘myDirective', function() {

return {

restrict: 'AEC',

replace: true,

template: '<p style="color: {{color}}">Hello World</p>',

link: function(scope, elem, attrs) {

},

compile: function(tElem,attrs) {

}

};

});

4

A – attribute,

Example: <div my-directive></div>

E – element,

Example: <my-directive></ my-directive>

C - class

Example: <span class=“my-directive”></ span>

5

Template – inline string

Example: '<p style="color: {{color}}">Hello World</p>‘

TemplateUrl – url to template.html

Example: ‘/views/template.html’

6

Replace: trueExample: <my-directive></ my-directive>

=> <div>Hello world</div>

Replace: falseExample: <my-directive></ my-directive>

=> <my-directive>

<div>Hello world</div>

</my-directive>

7

Scope: true

Use a child scope that inherits from parent

Scope: false //default

Don’t have any scopes, only parent

Scope: {}

Use a new isolated scope

8

Scope: {

variable1: ‘@’,

variable2: ‘=‘,

func: ‘&’

}

Use “@” for One Way Text Binding

Use “=“ for Two Way Binding

Use “&” to Execute Functions in the Parent Scope

Example: Link

9

Transclude: true

Example: <my-directive>Hello</my-directive>

Template: <div ng-transclude></div>

On page: <div>Hello</div>

10

link: function(scope, elem, attrs) {

scope.color = "white";

}

11

compile: function(tElem,attrs) {

//do optional DOM transformation here

return function(scope,elem,attrs) {

//linking function here

};

}

12

?

13

Recommended