Actualmente estoy aprendiendo AngularJS y tengo dificultades para comprender la diferencia entre ng-bindy ng-model.

¿Alguien puede decirme en qué se diferencian y cuándo se debe usar uno sobre el otro?

ng-bind tiene enlace de datos unidireccional ($ scope -> view). Tiene un acceso directo {{ val }} que muestra el valor del alcance $scope.valinsertado en html donde valhay un nombre de variable.

ng-model está diseñado para colocarse dentro de elementos de formulario y tiene enlace de datos bidireccional ($ scope -> view y view -> $ scope), por ejemplo <input ng-model="val"/>.

La respuesta de tosh llega muy bien al corazón de la pregunta. Aquí hay información adicional ...

Filtros y Formateadores

ng-bindy ng-modelambos tienen el concepto de transformar los datos antes de enviarlos al usuario. Para ese fin, ng-bindusa filtros , mientras que ng-modelusa formateadores .

filtro (ng-bind)

Con ng-bind, puede usar un filtro para transformar sus datos. Por ejemplo,

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

o más simplemente:

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

Tenga en cuenta que uppercasees un filtro angular incorporado , aunque también puede crear su propio filtro .

formateador (modelo ng)

Para crear un formateador de modelo ng, cree una directiva que lo haga require: 'ngModel', lo que permite que esa directiva obtenga acceso a ngModel controller. Por ejemplo:

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

Luego en tu parcial:

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

Esto es esencialmente el ng-modelequivalente de lo que está haciendo el uppercase filtro en el ng-bindejemplo anterior.

---

Analizadores

Ahora, ¿qué pasa si planea permitir que el usuario cambie el valor de mystring? ng-bindsolo tiene enlace unidireccional, desde modelo -> vista . Sin embargo, ng-modelpuede enlazar desde la vista -> modelo, lo que significa que puede permitir que el usuario cambie los datos del modelo, y usando un analizador puede formatear los datos del usuario de una manera simplificada. Así es como se ve:

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

---

Juega con un plunker en vivo de los ng-modelejemplos de formateador / analizador

---

¿Qué más?

ng-modelTambién tiene validación incorporada. Basta con modificar $parserso $formattersfunción para llamar ngModel 's controller.$setValidity(validationErrorKey, isValid)función .

Angular 1.3 tiene una nueva matriz de validadores $ que puede usar para la validación en lugar de$parserso$formatters.

Angular 1.3 también tiene soporte getter / setter para ngModel

ngModel

La directiva ngModel vincula una entrada, select, textarea (o control de formulario personalizado) a una propiedad en el ámbito.

Esta directiva se ejecuta en el nivel de prioridad 1.

Plunker de ejemplo

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>

ngModel es responsable de:

• Enlazar la vista al modelo, que requieren otras directivas como input, textarea o select.
• Proporcionar comportamiento de validación (es decir, requerido, número, correo electrónico, url).
• Mantener el estado del control (válido / inválido, sucio / prístino, tocado / no tocado, errores de validación).
• Establecer clases css relacionadas en el elemento (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touch, ng -ttouch) incluyendo animaciones.
• Registrar el control con su formulario padre.

ngBind

El atributo ngBind le dice a Angular que reemplace el contenido de texto del elemento HTML especificado con el valor de una expresión dada y que actualice el contenido de texto cuando cambie el valor de esa expresión.

Esta directiva se ejecuta en el nivel de prioridad 0.

Plunker de ejemplo

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>

ngBind es responsable de:

• Reemplazar el contenido de texto del elemento HTML especificado con el valor de una expresión dada.

Si duda entre usar ng-bindo ng-model, intente responder estas preguntas:

---

¿ Solo necesita mostrar datos?

• Sí: ng-bind (enlace unidireccional)

• No: ng-model (enlace bidireccional)

¿Necesita enlazar contenido de texto (y no valor)?

• Si: ng-bind

• No: ng-model (no debe usar ng-bind donde se requiere valor)

¿Tu etiqueta es HTML <input>?

• Sí: ng-model (no puede usar ng-bind con <input>etiqueta)

• No: ng-bind

ng-model

La directiva ng-model en AngularJS es una de las mayores fortalezas para unir las variables utilizadas en la aplicación con componentes de entrada. Esto funciona como enlace de datos bidireccional. Si desea comprender mejor los enlaces bidireccionales, tiene un componente de entrada y el valor actualizado en ese campo debe reflejarse en otra parte de la aplicación. La mejor solución es vincular una variable a ese campo y generar esa variable donde quiera que se muestre el valor actualizado a través de la aplicación.

ng-bind

ng-bind funciona de manera muy diferente a ng-model. ng-bind es un enlace de datos unidireccional utilizado para mostrar el valor dentro del componente html como HTML interno. Esta directiva no se puede usar para enlazar con la variable sino solo con el contenido de los elementos HTML. De hecho, esto se puede usar junto con ng-model para vincular el componente a elementos HTML. Esta directiva es muy útil para actualizar los bloques como div, span, etc. con contenido HTML interno.

Este ejemplo te ayudaría a entender.

ngModel usualmente se usa para etiquetas de entrada para enlazar una variable que podemos cambiar desde una variable del controlador y una página html, pero ngBind se usa para mostrar una variable en una página html y podemos cambiar una variable solo desde el controlador y html solo muestra la variable.

Podemos usar ng-bind with <p>para mostrar, podemos usar atajos para ng-bind {{model}}, no podemos usar ng-bind con controles de entrada html, pero podemos usar atajos ng-bind {{model}}con 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>