Pregunta ¿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?


530
2017-09-14 07:02


origen


Respuestas:


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

ng-model está destinado a colocarse dentro de elementos de formulario y tiene un enlace de datos bidireccional ($ scope -> view y view -> $ scope) p. ej. <input ng-model="val"/>.


802
2017-09-14 07:44



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

Filtros y formateadores

ng-bind y ng-model ambos tienen el concepto de transformar datos antes de enviarlos al usuario. Con ese fin, ng-bind usos filtros, mientras ng-model usos formateadores.

filtro (ng-bind)

Con ng-bind, puedes usar un filtrar para transformar tus datos Por ejemplo,

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

o más simplemente:

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

Tenga en cuenta que uppercase es un filtro angular incorporado, aunque también puedes construye tu propio filtro.

formateador (ng-modelo)

Para crear un formateador ng-model, usted crea una directiva que hace require: 'ngModel', lo que permite que esa directiva obtenga acceso a ngModel's 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-model equivalente de lo que el uppercase  filtrar está haciendo en el ng-bind ejemplo de arriba


Parsers

Ahora, ¿qué sucede si planea permitir que el usuario cambie el valor de mystring? ng-bind solo tiene una forma vinculante, desde modelo->ver. Sin embargo, ng-model puede obligar desde ver->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 manera 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 ng-model ejemplos de formateador / analizador


¿Qué más?

ng-model también tiene validación incorporada. Simplemente modifica tu $parsers o $formatters función para llamar ngModeles controller.$setValidity(validationErrorKey, isValid) función.

Angular 1.3 tiene una nueva matriz $ 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


138
2018-05-20 02:52



ngModel

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

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

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

  • Vinculando la vista al modelo, qué otras directivas como input, textarea o select require.
  • Proporcionando 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 tocado, 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

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

29
2018-04-17 12:25



Si tienes dudas entre usar ng-bind o ng-model, intenta responder a estas preguntas:


Vos si solamente Necesitar monitor ¿datos?

  • Sí: ng-bind  (enlace unidireccional)

  • No: ng-model  (enlace bidireccional)

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

  • Sí: ng-bind 

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

Es tu etiqueta un HTML <input>?

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

  • No: ng-bind


8
2017-11-16 09:22



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


6
2018-04-29 00:21



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;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<head>Diff b/w model and bind</head>
<body data-ng-app="testApp">
    <div data-ng-controller="testCTRL">
        Model-Data : <input type="text" data-ng-model="testingModel">
        <p>{{testingModel}}</p>
          <input type="text" data-ng-bind="testingBind">
          <p ng-bind="testingBind"></p>
    </div>
</body>


5
2017-12-09 15:09



ngModel Usamos generalmente para las etiquetas de entrada para vincular una variable que podemos cambiar la variable desde el controlador y la página html, pero ngBind utilizar para mostrar una variable en la página html y podemos cambiar la variable solo desde el controlador y la variable html just show.


2
2017-12-29 13:19