Angular — Directives: handling scope

By gsans on Wed, 01/07/2015 - 15:40
IT Trends

AngularJS

When creating your directive you need to decide how are you going to handle scope. There are two options: isolated from the outside world, linked to the parent scope.

Isolated scope

Creates new scope but you CAN'T access $scope.$parent. This is the only option blocking access to the parent scope. All the other options below allow it. Even scope: false

scope: {}

Basic link (via $scope.$parent)

Creates new scope but you CAN access parent scope using $scope.$parent. This is the default option when no scope option is used and apparently is equal to scope: false.

 scope: true   
    
//Usage:      
//  var setting = $scope.$parent.setting;   

Using DOM element attributes

One-way linked variable

<profile id="1"></profile>  

scope : { local_id: "@id" }  //using alias 
scope : { id: "@" }  //abbreviation when using identical names   

//Usage:  
//  var profile_id = local_id; 
//  var profile_id = id;  

Two-way linked variable

<profile data="user"></profile>  

scope : { local_data: "=data" } //using alias 
scope : { data: "=" } //abbreviation when using identical names  

//Usage:  
//  local_data = 1; 
//  data = 1;

Calling an external function

<profile onAlert="alert(message)"></profile>  

scope : { local_onAlert: "&onAlert" } //using alias 
scope : { onAlert: "&" } //abbreviation when using identical names  

//Usage:  
//  local_onAlert({message:"hey"}); 
//  onAlert({message:"hey"});

AngularJs Meetup South London Collection | this article

scope
directives
angularJs

Prueba Semrush gratis 14 días!