Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Sobre o uso de $Scope e this

Em alguns tutoriais que já antei lendo sobre o angular, uma outra maneira de acessar as variáveis seria o uso da palavra chave this, conforme abaixo:

    <div ng-controller="controller as t">
        <ul>
            <li ng-repeat="item in items"><input type="text"
                ng-model="item.value"> <input type="checkbox"
                ng-click="$emit('touched')"></li>
        </ul>
        {{t.teste}}
    </div>
var aplicativo = angular.module('myapp',[]).controller('controller',['$scope',function($scope){
    this.teste ="oi";
}]);

Já li algumas coisas à frente, mas não quero fugir do contexto do que se está explicando, porém o que você considera desse comportamento ?

6 respostas

this referencia o contexto do objeto atual. Se você criar uma closure ou outro objeto dentro do controller , this vai passar a apontar para o objeto ou closure mais interno dentro daquele contexto.

$scope se atem ao escopo da conversação entre a view e o controller que você estiver usando. Isso começa a fazer diferença quando você tem mais de um controller para uma mesma view ou quando usa escopos aninhados.

No caso de você usar escopos aninhados, dê uma olhada na técnica chamada Controller as, para explicitamente informar qual controller está sendo usado naquele momento.

Me parecem ser duas técnicas que podem atingir o mesmo objetivo final. Qual é preferível ?

Quais casos seria mais interessante o uso de uma ou outra, lembro-me que o curso não chegou ainda nesse ponto mas as Diretivas customizadas me parecem fazer uso do $scope ou daria para ter o this também ? Fica parecendo uma questão de preferência... ou pelo menos no futuro, com o Angular 2 , qual seria melhor investir?

Com Controller as você usa this e esquece $scope.

Pelo que tenho visto no mercado, as empresas ainda vão ficar um bom tempo presas à versão 1.

solução!

Oi Leonardo. Em angular 2 (que ainda não saiu a versão final) não há mais $scope e sim this. Sendo assim, para ajudar no processo de migração, o uso de this como no exemplo que você deu pode ser interessante para um projeto que você esta começando do zero.

Contudo, você deve usar this com a sintaxe controller as, uma sintaxe que foi criada posteriormente. Tem que ficar atento para essa finalidade.

Minha sugestão é que você chegue ao treinamento até o fim. Depois que tudo estiver funcionando, pode ponderar migrar para as versões mais recentes e utilizar alguns tricks como esse.

Só lembrando que depois do lançamento do Angular 2 a Google só dará 18 meses de suporte para a versão 1.0, mas isso não tira sua importância, tendo em vista que o framework teve uma adoção muito boa no mercado e muitas empresas investiram nele.

Aliás, se você usar controller as precisará mudar o router oficial do Angular, pois quando você aprender a criar rotas com Angular, ele não suporta a definição de "controller as" em rotas, já o ui-router sim. Mas como você esta no primeiro capítulo, isso não fará sentido para você ainda.

Você precisa saber se o tutorial que você esta lendo usa ou não o router padrão do Angular para não se confundir.

My two cents!!!

Entre usar this ou $scope, minha sugestão é que você use SEMPRE o this.

Fica muito mais fácil de trabalhar na view identificando quem você realmente está acessando e você evita compartilhar escopo do controller (e até de diretivas) que você não quer.

Para evitar problemas de referência em funções internas deve-se criar um alias para o this do controller.

var aplicativo = angular.module('myapp',[]).controller('MeuController', [function(){
    var self = this;

    self.teste ="oi";

    function hello() {
        this.nome = 'João';
        console.log(self.teste + ' ' + this.nome); // Tenho acesso ao "this" do controller
    }

    hello();
}]);

E sobre a questão das rotas Flavio, é possível usar controller as com ngRoute, não há necessidade de migrar para o ui-router, basta usar a propriedade controllerAs na configuração da rota.

$routeProvider.when('/tarefa', {    
    templateUrl: 'minha.view.html',
    controller: 'MeuController',
    controllerAs: 'controller'
});