Angular — Directivas: como configurar la variable scope

AngularJS

Es importante que cuando diseñamos nuestras directivas en Angular decidir como vamos a gestionar nuestra variable scope. Existen basicamente dos opciones: scope aislado o usando herencia con el scope superior.

Scope aislado

Esto creara un nuevo scope pero no podremos acceder al padre con $scope.$parent. Esta es la unica opcion que impide el acceso compartido al padre, el resto si lo permiten. Incluso scope: false

scope: {} 

Enlace basico (via $scope.$parent)

Esto creara un nuevo scope pero nos permitira acceder al padre usando $scope.$parent. Esta es la opcion por defecto cuando no usamos ningun parametro de configuracion y parece ser igual a scope: false.

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

Usando atributos DOM

Enlace en una direccion (one-way)

Esta opcion nos permite pasar facilmente parametros de configuracion.

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

Enlace doble (two-way)

Esta opcion nos permite modificar una variable externa a nuestra directiva mediante interacciones del usuario o por cambios iniciados internamente.

<profile data="user"></profile>    scope : { local_data: "=data" } //using alias  scope : { data: "=" } //abbreviation when using identical names    //Usage:   //  local_data = 1;  //  data = 1;  

Llamando a una funcion externa

Esta opcion nos permite hacer llamadas a funciones externas como respuesta a eventos dentro de nuestra directiva.

<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