Por que os documentos do AngularJS não usam um ponto na diretiva do modelo?

No vídeo AngularJS MTV Meetup: Melhores Práticas (2012/12/11) , Miško explica “.. se você usar ng-model, tem que haver um ponto em algum lugar. Se você não tem um ponto, você está fazendo isso errado..”

No entanto, o primeiro exemplo (The Basics) no site Angular.JS parece contradizer isso. O que da? O Angular.JS mudou desde o encontro da MTV que agora é mais tolerante com o ng-model?

Esse pequeno ponto é muito importante quando se lida com as complexidades da inheritance de escopo.

O vídeo egghead.io “The Dot” tem uma visão geral muito boa, assim como essa pergunta muito popular de estouro de pilha: Quais são as nuances do escopo protótipo / inheritance prototípica no AngularJS?

Vou tentar resumir aqui:

O Angular.js usa o escopo herdado para permitir que um escopo filho (como um controlador filho) veja as propriedades do escopo pai. Então, digamos que você tenha uma configuração como:

 

( Jogue junto em um JSFiddle )

No início, se você iniciasse o aplicativo e digitasse na input pai, o filho seria atualizado para refletir isso.

No entanto, se você editar o escopo filho, a conexão com o pai será interrompida e os dois não serão mais sincronizados. Por outro lado, se você usar ng-model="baz.bar" , o link permanecerá.

A razão pela qual isso acontece é que o escopo filho usa a inheritance prototípica para procurar o valor, portanto, desde que ele nunca seja definido no filho, ele passará para o escopo pai. Mas, uma vez definido, ele não procura mais o pai.

Quando você usa um object ( baz ) em vez disso, nada nunca é definido no escopo filho ea inheritance permanece.

Para detalhes mais detalhados, confira a resposta do StackOverflow

Dot será necessário quando você herdar protótipo de um escopo de outro, por exemplo, no caso de ng-repeat, um novo escopo é criado para cada item de linha que herda de forma prototípica do escopo pai. No exemplo básico, não há inheritance de protótipo, pois há apenas um escopo, mas se você tiver um número de escopos filho, começará a enfrentar o problema. O link abaixo fará tudo claro.

https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-repeat

Então, para resolver isso, verifique se no JS você declara o pai primeiro:

por exemplo

 $scope.parent 

Seguido por:

 $scope.parent.child = "Imma child"; 

fazendo apenas a criança sem o pai vai quebrar Angular.