AngularJs Meetup South London Collection | this article

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