Existem dois padrões em uso para acessar as funções do controlador: this
e $scope
.
Qual devo usar e quando? Eu entendo que this
é definido para o controlador e $scope
é um object na cadeia de escopo para exibições. Mas com a nova syntax “Controller as Var”, você pode facilmente usar qualquer um deles. Então, o que estou perguntando é o que é melhor e qual é a direção para o futuro?
Exemplo:
Usando this
function UserCtrl() { this.bye = function() { alert('....'); }; }
Usando o $scope
function UserCtrl($scope) { $scope.bye = function () { alert('....'); }; }
Eu pessoalmente acho o this.name
para ser mais fácil no olho e mais natural em comparação com outros padrões OO JavaScript.
Conselho por favor?
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.
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';
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!