¿Cuál es la diferencia entre ng-model y ng-bind?

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

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

Sep 14 '12 14:09 dubs

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

Filtros y formateadores

ng-bindy ng-modelambos tienen el concepto de transformar datos antes de enviarlos al usuario. Para ello ng-bindutiliza filtros , mientras que ng-modelutiliza formateadores .

filtro (ng-bind)

Con ng-bind, puedes utilizar un filtro para transformar tus 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 construir su propio filtro .

formateador (ng-modelo)

Para crear un formateador ng-model, crea una directiva que hace 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 hace el uppercase filtrong-bind en el ejemplo anterior.

Analizadores

Ahora, ¿qué pasa si planeas permitir que el usuario cambie el valor de mystring? ng-bindsolo tiene enlace unidireccional, desde modelo --> vista . Sin embargo, ng-modelse puede vincular desde la vista --> modelo , lo que significa que puede permitir que el usuario cambie los datos del modelo y, utilizando un analizador , puede formatear los datos del usuario de 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();
      });
    }
  }
}

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

¿Qué otra cosa?

ng-modelTambién tiene validación incorporada. Simplemente modifique su función $parserso $formatterspara llamar a la función de ngModelcontroller.$setValidity(validationErrorKey, isValid) .

Angular 1.3 tiene una nueva matriz $validators que puedes usar para validación en lugar de$parserso$formatters.

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

May 20 '2014 02:05 Gil Birman

ngModelo

Esta directiva se ejecuta en el nivel de prioridad 1.

Ejemplo de plomero

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:

• Vincular la vista al modelo, que requieren otras directivas como input, textarea o select.
• Proporcionar comportamiento de validación (es decir, obligatorio, número, correo electrónico, URL).
• Mantener el estado del control (válido/inválido, sucio/prístino, tocado/sin tocar, errores de validación).
• Configuración de clases CSS relacionadas en el elemento (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched) incluidas las animaciones.
• Registrar el control con su formulario principal.

ngBind

Esta directiva se ejecuta en el nivel de prioridad 0.

Ejemplo de plomero

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 determinada.

Apr 17 '2015 12:04 Subodh Ghulaxe