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

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

¿Alguien puede decirme cómo difieren y cuándo se debe usar uno sobre el otro?

ng-bind tiene un enlace de datos de una vía ($ scope -> view). Tiene un atajo {{ val }} que muestra el valor del scope $scope.val insertado en html donde val es un nombre de variable.

ng-model está destinado a colocarse dentro de los elementos del formulario y tiene un enlace de datos bidireccional ($ scope -> view y view -> $ scope), p. ej. .

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

Filtros y formateadores

ng-bind y ng-model tienen el concepto de transformar datos antes de darlos a conocer al usuario. Para ese fin, ng-bind usa filtros , mientras que ng-model usa formateadores .

filtro (ng-bind)

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

,

o más simplemente:

{{mystring | uppercase}}

Tenga en cuenta que la uppercase es un filtro angular incorporado , aunque también puede construir su propio filtro .

formateador (ng-modelo)

Para crear un formateador de ng-model, se crea una directiva que require: 'ngModel' , que permite que esa directiva obtenga acceso al controller de ngModel. 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:

  

Este es esencialmente el equivalente del ng-model de lo que está haciendo el filtro en uppercase en el ejemplo ng-bind anterior.


Parsers

Ahora, ¿qué mystring si planea permitir que el usuario cambie el valor de mystring ? ng-bind solo tiene enlace de una vía, desde model -> view . Sin embargo, ng-model puede vincularse desde view -> model, lo que significa que puede permitir que el usuario modifique los datos del modelo, y al utilizar un analizador , puede formatear los datos del usuario de forma simplificada. Esto es lo que parece:

 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 ejemplos de formateador / analizador ng-model


¿Qué más?

ng-model también tiene validación incorporada. Simplemente modifique su función de $parsers o $formatters para llamar al controller.$setValidity(validationErrorKey, isValid) .

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

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

ngModel

La directiva ngModel vincula una entrada, selección, área de texto (o control de formulario personalizado) a una propiedad en el scope.

Esta directiva se ejecuta en el nivel de prioridad 1.

Ejemplo 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 es responsable de:

  • Vincula la vista al modelo, que otras directivas como input, textarea o select requieren.
  • Proporcionar un 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 modificado, errores de validación).
  • Establecer clases CSS relacionadas en el elemento (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched) incluyendo animaciones.
  • Registrando el control con su forma 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 del texto cuando cambie el valor de esa expresión.

Esta directiva se ejecuta en el nivel de prioridad 0.

Ejemplo Plunker

JAVASCRIPT

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

HTML

 

Hello !

ngBind es responsable de:

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

Si duda entre utilizar ng-bind o ng-model , intente responder estas preguntas:


¿ Solo necesita mostrar datos?

  • Sí: ng-bind (enlace unidireccional)

  • No: ng-model (enlace bidireccional)

¿Necesita vincular el contenido de texto (y no el valor)?

  • Sí: ng-bind

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

¿Tu etiqueta es HTML ?

  • Sí: ng-model (no puede usar ng-bind con etiqueta de entrada)

  • No: ng-bind

ng-model

La directiva ng-model en AngularJS es una de las mayores fortalezas para vincular las variables utilizadas en la aplicación con los componentes de entrada. Esto funciona como enlace de datos bidireccional. Si desea comprender mejor las vinculaciones 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 de una manera utilizado para mostrar el valor dentro del componente html como HTML interno. Esta directiva no se puede usar para vincular con la variable, pero 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.

 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}}

ngModel usualmente usa tags de entrada para vincular una variable que podemos cambiar de variable desde controlador y página html pero uso de ngBind para mostrar una variable en página html y podemos cambiar la variable solo desde el controlador y la variable html simplemente mostrar.

Podemos usar ng-bind con

para mostrar, podemos usar acceso directo para ng-bind {{model}} , no podemos usar ng-bind con controles de entrada html, pero podemos usar acceso directo para ng-bind {{model}} con controles de entrada html.

   Hello {{name}} 

    Intereting Posts