Qual é a diferença entre ng-model e ng-bind

Atualmente estou aprendendo AngularJS e estou tendo dificuldade em entender a diferença entre ng-bind e ng-model .

Alguém pode me dizer como eles diferem e quando um deve ser usado sobre o outro?

ng-bind tem binding de dados unidirecional ($ scope -> view). Ele tem um atalho {{ val }} que exibe o valor do escopo $scope.val inserido em html, em que val é um nome de variável.

O ng-model destina-se a ser colocado dentro de elementos de formulário e possui binding de dados bidirecional ($ scope -> view e view -> $ scope), por exemplo, .

A resposta de Tosh chega bem ao cerne da questão. Aqui estão algumas informações adicionais ….

Filtros e Formatadores

ng-bind e ng-model têm o conceito de transformar dados antes de emiti-los para o usuário. Para esse fim, o ng-bind usa filtros , enquanto o ng-model usa formatadores .

filtro (ng-bind)

Com o ng-bind , você pode usar um filtro para transformar seus dados. Por exemplo,

,

ou mais simplesmente:

{{mystring | uppercase}}

Observe que uppercase são um filtro angular integrado , embora você também possa criar seu próprio filtro .

formatador (ng-model)

Para criar um formatador modelo ng, você cria uma diretiva que require: 'ngModel' , que permite que a diretiva obtenha access ao controller ngModel. Por exemplo:

 app.directive('myModelFormatter', function() { return { require: 'ngModel', link: function(scope, element, attrs, controller) { controller.$formatters.push(function(value) { return value.toUpperCase(); }); } } } 

Então na sua parcial:

  

Este é essencialmente o equivalente do ng-model do que o filtro de uppercase está fazendo no exemplo ng-bind acima.


Analisadores

Agora, e se você planeja permitir que o usuário altere o valor de mystring ? ng-bind só tem binding unidirecional, do modelo -> view . No entanto, ng-model pode vincular a partir do ng-model view -> , o que significa que você pode permitir que o usuário altere os dados do modelo e, usando um analisador, pode formatar os dados do usuário de maneira simplificada. Aqui está o que parece:

 app.directive('myModelFormatter', function() { return { require: 'ngModel', link: function(scope, element, attrs, controller) { controller.$parsers.push(function(value) { return value.toLowerCase(); }); } } } 

Jogue com um plunker ao vivo dos exemplos de formatador / analisador do ng-model


O quê mais?

ng-model também possui validação integrada. Simplesmente modifique sua function $parsers ou $formatters para chamar a function do controller.$setValidity(validationErrorKey, isValid) .

O Angular 1.3 tem uma nova matriz de $ validators que você pode usar para validação em vez de $parsers ou $formatters .

Angular 1.3 também possui suporte a get / setter para ngModel

ngModelo

A diretiva ngModel vincula uma input, select, textarea (ou controle de formulário personalizado) a uma propriedade no escopo.

Esta diretiva é executada no nível de prioridade 1.

Exemplo de Plunker

JAVASCRIPT

 angular.module('inputExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.val = '1'; }]); 

CSS

 .my-input { -webkit-transition:all linear 0.5s; transition:all linear 0.5s; background: transparent; } .my-input.ng-invalid { color:white; background: red; } 

HTML

 

Update input to see transitions when valid/invalid. Integer is a valid value.

ngModel é responsável por:

  • Vinculando a exibição ao modelo, que outras diretivas, como input, área de texto ou seleção, requerem.
  • Fornecendo comportamento de validação (ou seja, requerido, número, email, url).
  • Mantendo o estado do controle (válido / inválido, sujo / intocado, tocado / intocado, erros de validação).
  • Definição de classs css relacionadas no elemento (ng-válido, ng-inválido, ng-sujo, ng-intocado, ng-tocado, ng-intocado) incluindo animações.
  • Registrando o controle com seu formulário pai.

ngBind

O atributo ngBind diz ao Angular para replace o conteúdo de texto do elemento HTML especificado pelo valor de uma determinada expressão e para atualizar o conteúdo do texto quando o valor dessa expressão é alterado.

Esta diretiva é executada no nível de prioridade 0.

Exemplo de Plunker

JAVASCRIPT

 angular.module('bindExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.name = 'Whirled'; }]); 

HTML

 

Hello !

ngBind é responsável por:

  • Substituindo o conteúdo de texto do elemento HTML especificado pelo valor de uma determinada expressão.

Se você está hesitante entre usar ng-bind ou ng-model , tente responder a estas perguntas:


Você precisa exibir dados?

  • Sim: ng-bind (binding unidirecional)

  • Não: ng-model (binding bidirecional)

Você precisa vincular o conteúdo de texto (e não o valor)?

  • Sim: ng-bind

  • Não: ng-model (você não deve usar ng-bind onde o valor é requerido)

Sua tag é um HTML ?

  • Sim: ng-model (você não pode usar ng-bind com tag de input)

  • Não: ng-bind

ng-model

A diretiva ng-model em AngularJS é uma das maiores forças para vincular as variables ​​usadas no aplicativo com componentes de input. Isso funciona como binding de dados bidirecional. Se você quiser entender melhor sobre as ligações bidirecionais, terá um componente de input e o valor atualizado nesse campo deverá ser refletido em outra parte do aplicativo. A melhor solução é vincular uma variável a esse campo e produzir essa variável onde quer que você queira exibir o valor atualizado através do aplicativo.

ng-bind

O ng-bind funciona muito diferente do ng-model. ng-bind é uma binding de dados unidirecional usada para exibir o valor dentro do componente html como HTML interno. Esta diretiva não pode ser usada para binding com a variável, mas apenas com o conteúdo dos elementos HTML. De fato, isso pode ser usado junto com o ng-model para vincular o componente a elementos HTML. Esta diretiva é muito útil para atualizar os blocos como div, span, etc. com conteúdo HTML interno.

Este exemplo ajudaria você a entender.

 angular.module('testApp',[]).controller('testCTRL',function($scope) { $scope.testingModel = "This is ModelData.If you change textbox data it will reflected here..because model is two way binding reflected in both."; $scope.testingBind = "This is BindData.You can't change this beacause it is binded with html..In above textBox i tried to use bind, but it is not working because it is one way binding."; }); 
 div input{ width:600px; } 
   Diff b/w model and bind  
Model-Data :

{{testingModel}}

ngModelo geralmente usado para tags de input para ligar uma variável que podemos alterar a variável do controlador e da página html, mas o uso ngBind para exibir uma variável na página HTML e podemos mudar a variável apenas do controlador e html apenas mostrar variável.

Podemos usar ng-bind com

para exibir, podemos usar atalho para ng-bind {{model}} , não podemos usar ng-bind com controles de input html, mas podemos usar atalho para ng-bind {{model}} com controles de input html.

   Hello {{name}} 

Intereting Posts