AngularJS: Directiva com Escopo Isolado

Bindings

Escopo isolado com encadernação de atributos é um pouco fresco mas falta-lhe a flexibilidade dos objectos de encadernação (o que é bastante normal hoje em dia) excepto as cordas simples. Além disso, qualquer alteração no escopo infantil não atualizará o escopo dos pais devido à sua limitação de encadernação de dados unidirecional. Se você precisar de algo mais fora dele, o escopo isolado das encadernações pode ser sua resolução neste caso. E é bastante fácil fazer isso, a única coisa que você precisa mudar é, ao invés de usar o símbolo “@”, você usa o símbolo “=”, só isso. Vamos usar o exemplo acima para demonstrar.

Em HTML:

<div ng-controller="MyCtrl">
<my-component isolated-binding-person="person">
{{isolatedBindingPerson}}
</my-component>
</div>

Em JavaScript:

var myModule = angular.module('myModule', )
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
isolatedBindingPerson:'='
}
};
})
.controller('MyCtrl', );

Notificação em nosso HTML, nós não precisamos mais das chaves duplas para interpolação, o que significa que você pode realmente ligar uma variável, e até mesmo uma chamada de função! Dê uma olhada no seguinte trecho de código:

-- HTML --<div ng-controller="MyCtrl">
<my-component isolated-binding-people="showPeople()">
<ul>
<li ng-repeat="person in isolatedBindingPeople">
{{person}}
</li>
</ul>
</my-component>
</div>-- JavaScript --var myModule = angular.module('myModule', )
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
isolatedBindingPeople:'='
}
};
})
.controller('MyCtrl', ;
}
}]);

Sem surpresa, no seu DOM, você deve ser capaz de ver uma lista do nome da pessoa sendo emitida. Adicionalmente, uma vez que esta é uma ligação de dados bidireccional, qualquer alteração na directiva irá realmente actualizar as variáveis do seu controlador, respectivamente. Incrível! Finalmente, e se você quiser disparar um evento do escopo criança e chamar uma função em seu escopo pai, até mesmo passar um parâmetro a partir do escopo criança? Isso parece complicado, vamos quebrá-lo um pouco.

Deixe um comentário