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?
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 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"/>
.
ToshLa respuesta llega al corazón de la pregunta muy bien. Aquí hay algo de información adicional ...
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.
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.
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
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
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
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:
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:
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
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;
}
<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>
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.