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

ng bind w3

Question

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

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

Answer 1

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

Filtros y formateadores

ng-bind y ng-model tienen el concepto de transformar los datos antes de enviarlos 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,

<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 puede crear su propio filtro .

formateador (modelo ng)

Para crear un formateador modelo ng, crea una directiva que sí require: ''ngModel'' , que permite que esa directiva obtenga acceso al controller de ngModel''s. Por ejemplo:

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

Entonces en tu parcial:

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

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

Analizadores

Ahora, ¿qué mystring si planea permitir que el usuario cambie el valor de mystring ? ng-bind solo tiene un enlace de forma, desde el modelo -> vista . Sin embargo, ng-model puede vincularse desde la vista -> modelo, lo que significa que puede permitirle al usuario cambiar los datos del modelo y, mediante un analizador , puede formatear los datos del usuario de manera optimizada. 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 del ng-model / analizador de ng-model

¿Qué más?

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

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

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

Answer 2

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

Answer 3

Si está dudando entre usar ngBind o ng-model , intente responder estas preguntas:

¿ Solo necesitas mostrar datos?

• Sí: ng-bind (enlace unidireccional)

• No: ng-model (enlace bidireccional)

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

• Sí: ng-bind

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

¿Es su etiqueta un HTML <input> ?

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

• No: ng-bind

Answer 4

modelo ng

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 de dos vías. Si desea comprender mejor los enlaces de dos vías, tiene un componente de entrada y el valor actualizado en ese campo debe reflejarse en la 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 muy diferente al modelo ng. 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 utilizar para vincular con la variable, sino solo con el contenido de los elementos HTML. Infact esto se puede usar junto con ng-model para enlazar 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.

Answer 5

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

ng-model está destinado a ser colocado dentro de los elementos del formulario y tiene enlace de datos bidireccional ($ scope -> view and view -> $ scope), por ejemplo, <input ng-model="val"/> .

Answer 6

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

Answer 7

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>

Answer 8

ngModel

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

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:

• Enlace de la vista en el modelo, lo 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 / intacto, errores de validación).
• Configuración de clases css relacionadas en el elemento (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-toca, ng-intuched) incluyendo animaciones.
• Registro del 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 el valor de esa expresión cambie.

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.