Dado este caso de teste usando o AngularJS 1.2 rc3: http://plnkr.co/edit/MX6otx (repetido abaixo)
1
ng-if toggle1: {{ toggle1 }} does not work
2
ng-if obj.toggle2: {{ obj.toggle2 }} then why does this work?
Questões:
Este mecanismo de inheritance de escopo é explicado muito bem em https://github.com/angular/angular.js/wiki/Understanding-Scopes
Como ngIf
cria seu próprio escopo, para fazê-lo funcionar você pode definir toggle1
em um escopo:
JS **
$scope.toggleMe = function(){ $scope.toggle1 = !$scope.toggle1; }
HTML
ng-if toggle1: {{ toggle1 }} does not work
Ver Demo Plunker
1. Por que 1 não funciona?
ng-if
cria um novo escopo. que causa o comportamento de binding “estranho” como explicado neste vídeo: http://egghead.io/lessons/angularjs-the-dot
2. Deve um trabalho?
Ler propriedades do escopo pai funciona (cadeia de protótipo), mas a gravação no escopo cria uma nova propriedade no escopo filho. Criando um desconectado
3. Por que 2 trabalha?
A mesma propriedade é lida no escopo pai (obj). A gravação em ng-click altera o object “obj”, não o escopo.
4/5. 2 deve trabalhar? Posso confiar em 2 para trabalhar em futuras atualizações do AngularJS?
Sim , este é o comportamento esperado documentado.
Dica: uso a extensão do Chrome AngularJS Batarang para obter insights sobre quais variables estão em qual escopo.