Qual é a diferença entre ng-bind vs um tempo de binding em angular

Qual é a diferença entre “ng-bind” e “one time binding” em js angular.

Se houver alguma diferença, onde devo usar cada um deles?

Ligação de dados bidirecional

A binding de dados bidirecional em AngularJS significa vincular dados de Model to View e vice-versa (os dados fluem do Scope / Controller para o View e do View para o escopo / controlador). ‘ ng-model ‘ é uma diretiva angular usada para obter vinculação de dados bidirecional. Quaisquer modificações a esse modelo a partir do Escopo / Controlador serão automaticamente propagadas para a visualização, independentemente de a visualização estar solicitando os dados atualizados e quaisquer modificações feitas no Modelo a partir da Visualização serão imediatamente refletidas de volta ao Escopo / Controlador.

Ligação de dados unidirecional

A binding de dados unidirecional no AngularJS significa vincular dados de Model to View (streams de dados do escopo / controlador para a exibição). ‘ ng-bind ‘ é uma diretiva angular usada para obter vinculação de dados unidirecional. Após a binding, quaisquer modificações a esse modelo do escopo / controlador serão automaticamente propagadas para a exibição, independentemente de a exibição estar solicitando os dados atualizados. Nenhuma propagação acontece para qualquer mudança no modelo da vista para o controlador.

Ligação de dados única

Como o próprio nome sugere, a binding ocorre apenas uma vez , ou seja, no primeiro ciclo de digestão. A binding única permite que um modelo ou visualização seja atualizada UMA VEZ do valor definido pelo controlador no primeiro ciclo de digestão. A partir do AngularJS 1.3, você pode usar o token ” :: ” para criar ligações de dados únicas. Estas são ligações que cancelam o registro de suas próprias funções $ watch () depois que o valor se estabilizou (o que basicamente significa que o valor está definido).

A binding única é usada para valores que não serão alterados depois que a página estiver estável. “Estável” geralmente significa que a expressão recebeu um valor. Quando o valor é definido, as alterações no valor no controlador não alteram o valor exibido até que a página seja recarregada. A syntax é {{:: expressão}}.

Portanto, para esses valores ou listas que não serão alterados depois que a página estiver estável, sempre tente usar a binding única. Isso reduzirá o número de observadores desnecessários em nosso aplicativo.

 
{{::customer.name}} ({{customer.address}})

Estes não são conceitos mutuamente exclusivos. Você pode unir uma vez com ng-bind também:

“ng-bind” é simplesmente a versão do atributo html da syntax regular {{expression}} do AngularJS.

Portanto,

é equivalente a

{{productName}}

.

A binding única é usada para valores que não serão alterados depois que a página estiver estável. “Estável” geralmente significa que a expressão recebeu um valor. Quando o valor é definido, as alterações no valor no controlador não alteram o valor exibido até que a página seja recarregada.

A syntax é {{::expression}} . Seguindo o exemplo acima, a syntax é

 
{{::productName}}

Uma explicação completa do algoritmo usado para determinar se uma página é estável pode ser encontrada aqui:

https://docs.angularjs.org/guide/expression

Ligação de Dados Bidirecional

A vinculação de dados bidirecional fornece a capacidade de usar o valor de uma propriedade em seu escopo sem esforço e exibi-lo em sua visualização, além de ter uma input de texto para atualizá-lo sem nenhuma lógica maluca.

Ligação de dados única

Primeiro, quero ter certeza de que isso não é uma binding de dados unidirecional. Tal coisa realmente não existe como uma convenção fornecida por Angular. A binding única permite que um modelo ou visualização seja atualizada UMA VEZ do valor definido pelo controlador no primeiro ciclo de digestão.

De maneira simples, eu entendi assim,

Ligação bidirecional de dadosng-model

Vincula o {{}} (no HTML) e $scope (no controlador) da variável e atualiza o valor da variável se alguma das alterações ocorrer.

Uma maneira de binding de dadosng-bind

Links apenas de $scope para {{}} , mas não vice-versa.