Angular — Directives: handling scope


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  
//  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  

//  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 

//  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 

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

AngularJs Meetup South London Collection | this article