Atualmente, estou aprendendo o AngularJS e estou tendo dificuldades para entender a diferença entre ng-binde ng-model.

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

ng-bind possui ligação de dados unidirecional ($ scope -> view). Possui um atalho {{ val }} que exibe o valor do escopo $scope.valinserido no html, em queval está o nome da variável.

O ng-model deve ser colocado dentro dos elementos do formulário e possui ligação de dados bidirecional ($ scope -> view e view -> $ scope), por exemplo <input ng-model="val"/>.

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

Filtros e formatadores

ng-binde ng-modelambos têm o conceito de transformar dados antes de enviá-los para o usuário. Para esse fim, ng-bindusa filtros , enquanto ng-modelusa formatadores .

filtro (ng-bind)

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

<div ng-bind="mystring | uppercase"></div>,

ou mais simplesmente:

<div>{{mystring | uppercase}}</div>

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

formatador (modelo ng)

Para criar um formatador de ng-model, você cria uma diretiva que faz isso require: 'ngModel', o que permite que essa diretiva obtenha acesso aos ngModel controller. 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 no seu parcial:

<input ngModel="mystring" my-model-formatter />

Isso é essencialmente o ng-modelequivalente ao que o uppercase filtro está fazendo no ng-bindexemplo acima.

---

Analisadores

Agora, e se você planeja permitir que o usuário altere o valor de mystring? ng-bindsó tem ligação unidirecional, do modelo -> visualização . No entanto, ng-modelpode-se ligar da view -> model, 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 do ng-modelformatador / analisador

---

O quê mais?

ng-modeltambém possui validação embutida. Basta modificar o seu $parsersou $formattersfunção a ser chamada ngModel 's controller.$setValidity(validationErrorKey, isValid)função .

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

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

ngModel

A diretiva ngModel vincula uma entrada, seleção, área de texto (ou controle de formulário personalizado) a uma propriedade no escopo.

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

Exemplo 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

<p id="inputDescription">
   Update input to see transitions when valid/invalid.
   Integer is a valid value.
</p>
<form name="testForm" ng-controller="ExampleController">
    <input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input"
         aria-describedby="inputDescription" />
</form>

O ngModel é responsável por:

• Vinculando a vista ao modelo, que outras diretivas, como entrada, área de texto ou seleção, exigem.
• Fornecendo comportamento de validação (ou seja, obrigatório, número, email, URL).
• Manter o estado do controle (válido / inválido, sujo / intocado, tocado / intocado, erros de validação).
• Definir classes css relacionadas no elemento (ng válido, ng inválido, ng sujo, ng intocado, tocado por ng e intocado) incluindo animações.
• Registrando o controle com seu formulário pai.

ngBind

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

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

Exemplo Plunker

JAVASCRIPT

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

HTML

<div ng-controller="ExampleController">
  <label>Enter name: <input type="text" ng-model="name"></label><br>
  Hello <span ng-bind="name"></span>!
</div>

O ngBind é responsável por:

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

Se você está hesitando em usar ng-bindou ng-model, tente responder a estas perguntas:

---

Você só precisa exibir dados?

• Sim: ng-bind (ligação unidirecional)

• Não: ng-model (ligação bidirecional)

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

• Sim: ng-bind

• Não: ng-model (você não deve usar ng-bind onde o valor for necessário)

Sua tag é um HTML <input>?

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

• Não: ng-bind

ng-model

A diretiva ng-model no AngularJS é uma das maiores forças para vincular as variáveis ​​usadas no aplicativo com componentes de entrada. Isso funciona como ligação de dados bidirecional. Se você deseja entender melhor sobre as ligações bidirecionais, possui um componente de entrada e o valor atualizado nesse campo deve ser refletido em outra parte do aplicativo. A melhor solução é vincular uma variável a esse campo e gerar essa variável sempre que você desejar exibir o valor atualizado por meio do aplicativo.

ng-bind

O ng-bind funciona muito diferente do ng-model. ng-bind é uma forma de ligação de dados usada para exibir o valor dentro do componente html como HTML interno. Esta diretiva não pode ser usada para ligação 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 aos elementos HTML. Esta diretiva é muito útil para atualizar blocos como div, span, etc. com conteúdo HTML interno.

Este exemplo ajudaria você a entender.

O ngModel normalmente usa tags de entrada para vincular uma variável que podemos mudar de variável da página controller e html, mas o ngBind usa para exibir uma variável na página html e podemos mudar variáveis ​​apenas do controller e html just show variable.

Podemos usar ng-bind com <p>para exibir, podemos usar atalho para ng-bind {{model}}, não podemos usar ng-bind com controles de entrada html, mas podemos usar atalho para ng-bind {{model}}com controles de entrada html.

<input type="text" ng-model="name" placeholder="Enter Something"/>
<input type="text" value="{{name}}" placeholder="Enter Something"/>
  Hello {{name}}
<p ng-bind="name"</p>