Angular – Diretivas: escopo de manuseio

Coleção AngularJs Meetup South London | Este artigo

Ao criar sua diretiva, você precisa decidir como tratará o escopo. Existem duas opções: isolado do mundo externo, vinculado ao escopo pai.

Escopo isolado

Cria um novo escopo, mas você NÃO PODE acessar $ scope. $ Parent . Esta é a única opção que bloqueia o acesso ao escopo pai. Todas as outras opções abaixo permitem isso. Atéscope: false

scope: {} 

Link básico (via $ scope. $ Parent)

Cria um novo escopo, mas você PODE acessar o escopo pai usando $ scope. $ Parent . Esta é a opção padrão quando nenhuma opção de escopo é usada e aparentemente é igual a scope: false.

scope: true 

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

Usando atributos de elemento DOM

Variável vinculada unilateral

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

Variável vinculada bidirecional

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

scope : { local_data: "=data" } //using alias

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


//Usage:

// local_data = 1;

// data = 1;

Chamando uma função externa

<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"});

Coleção AngularJs Meetup South London | Este artigo