AngularJS/ HTML5 / CSS3/ Javascript

Angular 1.2.x One-Way data-binding

angular_header

A grande vantagem do AngularJS é o two-way data-binding. Embora isso seja uma excelente função, em excesso acaba causando problemas, dentre eles performance para renderizar valores.

E isso impacta diretamente na questão de Grids de dados, internacionalização, gráficos e por ai adiante.

Boa parte de aplicações usa apenas one-way data-binding, já que é parte pertinente só renderizar dados, quando se exige um certo nível de aceitação para intergir, consumir um websocket ou atualizações constantes o two-way é a solução perfeita para isso.

A atual versão do angular 1.2.24 só possui suporte ao two-way data-binding. Qual a solução para o problema? Criar uma diretiva que permita o uso apenas de uma maneira.

Entendendo o problema

Sempre que você assina o two-way com {{ }} em suas views de HTML, o angular cria uma raiz de eventos para observar se o valor vai mudar ou não, consequentemente atualizar a view.

 
     <p>Olá {{USER_NAME}}</p>

O $watch faz esse papel, criando isso em pequenas aplicações é até aceitável, já que o nível de controle é sustentável e não existe tantas variáveis sendo mudada.

Criando a diretiva One-way

var app = angular.module("OneWayApp",[]);
 
app.directive('oneWay', function() {
    return {
        scope: true,
        link: function($scope,$elm) {
            setTimeout(function() {
                $scope.$destroy();
                $elm.removeClass('ng-binding ng-scope');
            }, 0);
        }
    }
});

O que eu faço é só destruir o $watcher depois que o valor for renderizado na view, assim evito ficar olhando por mudanças que não são necessárias.

Veja um exemplo sendo executado abaixo.

One-way App

Performaticamente falando, consigo renderizar 10 mil itens na tela sem precisa olhar todos eles, tire o atributo one-way e seu Brower pode quebrar e fechar. Até a barra de rolagem fica mais suave com tantos itens sem precisa observar suas mudanças.Igor Costa

Futuro do Angular JS

Essa função vai vim built-in na próxima versão do AngularJS 1.3.

Sua anotação será da seguinte forma:

 
<p>{{::user.name}}</p>

Colocando só os ::, essa função quem quiser se arriscar na RC-1, pode usar em seus projetos futuros, embora quem ainda dependa muito de funções especificas do 1.2.x, pode usar essa diretiva.

4 thoughts on “Angular 1.2.x One-Way data-binding

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *