Devo usar `this` ou` $ scope`?

Ambos têm seus usos. Primeiro, alguma história …

$ scope é a técnica “clássica”, enquanto “controller as” é muito mais recente (a partir da versão 1.2.0 oficialmente, embora tenha aparecido em pré-lançamentos instáveis ​​antes disso).

Ambos funcionam perfeitamente bem e a única resposta errada é misturá-los no mesmo aplicativo sem um motivo explícito. Francamente, misturá-los funcionará, mas apenas aumentará a confusão. Então escolha um e role com ele. O mais importante é ser consistente.

Qual? Isso depende de você. Há muitos outros exemplos por aí do $ escopo, mas o “controlador como” também está ganhando força. Um é melhor que o outro? Isso é discutível. Então, como você escolhe?

Conforto

Eu prefiro o “controlador como” porque eu gosto de esconder o $ escopo e expor os membros do controlador para a visão através de um object intermediário. Ao definir isso. *, Posso expor exatamente o que quero expor do controlador para a exibição. Você pode fazer isso com $ scope também, eu prefiro usar JavaScript padrão para isso. Na verdade, eu codifico assim:

 var vm = this; vm.title = 'some title'; vm.saveData = function(){ ... } ; return vm; 

Isso me parece mais limpo e facilita a visualização do que está sendo exposto à vista. Repare que eu nomeio a variável que eu retorno “vm”, que significa viewmodel. Essa é apenas minha convenção.

Com o $ scope eu posso fazer as mesmas coisas, então não estou adicionando ou diminuindo a técnica.

 $scope.title = 'some title'; $scope.saveData = function() { ... }; 

Então cabe a você lá.

Injeção

Com $ scope eu preciso injetar $ scope no controller. Eu não tenho que fazer isso com o controlador como, a menos que eu precise por algum outro motivo (como $ broadcast ou relógios, embora eu tente evitar relógios no controlador).

ATUALIZAÇÃO Eu escrevi este post sobre as 2 opções: http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/

$scope está sendo removido no Angular 2.0. Assim, usar this seria uma abordagem que outros querem seguir à medida que a data de lançamento do Angular 2.0 se aproxima.

Minha opinião é que ‘isso’ em javascript tem problemas suficientes por conta própria, e que adicionar outro significado / uso não é uma boa idéia.

Eu usaria $ escopo, por uma questão de clareza.

ATUALIZAR

Existe agora a syntax ‘controller as’, discutida aqui . Eu não sou fã, mas agora que é uma construção mais ‘oficial’ AngularJS, merece alguma atenção.

Eu acho que o Controller As é melhor, pois permite mais facilmente os escopos de aninhamento, como descrito por Todd Motto aqui:

http://toddmotto.com/digging-into-angulars-controller-as-syntax/

Além disso, irá garantir que você tenha sempre pelo menos um. na sua expressão de binding que obriga a seguir a recomendação de não ligar a primitivas .

Além disso, você pode dissociar do escopo que está desaparecendo na versão 2.0.

Usar ‘this’ parece ser novo no Google I / O 2013

http://m.youtube.com/watch?v=HCR7i5F5L8c

Além disso, verifique esta resposta: ‘this’ vs $ scope em controladores AngularJS

A documentação Angular diz explicitamente que this é recomendado. Isso, além do fato de que $scope está sendo removido, é razão suficiente para eu nunca usar o $scope .

O “$ scope está sendo removido em Angular 2.0” de jason328 soa um bom motivo para mim. E eu encontrei outro motivo para me ajudar a fazer a escolha: this é mais legível – quando eu vejo fooCtrl.bar em HTML, eu imediatamente sei onde encontrar a definição de bar .

Atualizações: não muito tempo depois de mudar para this solução, eu comecei a perder a maneira $scope que precisa de menos digitação

Ambos funcionam, mas se você aplicar coisas que são apropriadas para o escopo para $ escopo, e se você aplicar coisas que são apropriadas para o controlador para o controlador, seu código será fácil de manter. Para as pessoas que dizem “Ugh apenas usar o escopo esquecer este controlador como syntax” … Pode funcionar o mesmo, mas eu me pergunto como você será capaz de manter uma enorme aplicação sem perder de vista as coisas.

Eu prefiro uma combinação.

Um simples console.log de $ scope e ‘this’ depois de preenchê-los com alguns dados simulados mostrarão isso.

O $ scope permite o access às partes de baixo de um controlador, por exemplo:

 $$ChildScope: null; $$childHead: null; $$childTail: null; $$listenerCount: Object; $$listeners: Object; $$nextSibling: Scope; $$prevSibling: null; $$watchers: null; $$watcherCount: 0; $id: 2; $parent: Object; foo: 'bar'; 

** Propriedades e methods com $ $ não são recomendados para a equipe Angular, mas o $ pode ser um jogo seguro para fazer coisas legais com $ parent e $ id.

‘this’ é direto ao ponto, anexando dados e funções de 2-way-bound. Você só verá o que você anexou:

 foo: 'bar'; 

Então, por que prefiro uma combinação?

Em aplicativos nesteds em roteador ui, posso acessar o controlador principal, definir e chamar valores universais e funções dentro de um controlador filho:

No controlador principal:

 // Main Controller var mainCtrl = this; mainCtrl.foo = 'Parent at the bar'; 

No Controlador Infantil:

 // Child Controller var mainCtrl = $scope.$parent.mainCtrl; var childCtrl = this; // update the parent from within the child childCtrl.underageDrinking = function(){ mainCtrl.foo = 'Child at the bar'; } // And then attach the child back to a property on the parent controller! mainCtrl.currentCtrl = childCtrl; 

Agora, você pode acessar o pai de dentro da criança e do filho do pai!