Respuestas:
ng-bind tiene enlace de datos unidireccional ($ scope -> view). Tiene un acceso directo {{ val }}
que muestra el valor del alcance $scope.valinsertado en html donde valhay un nombre de variable.
ng-model está diseñado para colocarse dentro de elementos de formulario y tiene enlace de datos bidireccional ($ scope -> view y view -> $ scope), por ejemplo <input ng-model="val"/>.
La respuesta de tosh llega muy bien al corazón de la pregunta. Aquí hay información adicional ...
ng-bindy ng-modelambos tienen el concepto de transformar los datos antes de enviarlos al usuario. Para ese fin, ng-bindusa filtros , mientras que ng-modelusa formateadores .
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 uppercasees un filtro angular incorporado , aunque también puede crear su propio filtro .
Para crear un formateador de modelo ng, cree una directiva que lo haga 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 está haciendo el uppercase filtro en el ng-bindejemplo anterior.
Ahora, ¿qué pasa si planea permitir que el usuario cambie el valor de mystring? ng-bindsolo tiene enlace unidireccional, desde modelo -> vista . Sin embargo, ng-modelpuede enlazar desde la vista -> 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 una 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();
});
}
}
}
Juega con un plunker en vivo de los ng-modelejemplos de formateador / analizador
ng-modelTambién tiene validación incorporada. Basta con modificar $parserso $formattersfunción para llamar ngModel 's controller.$setValidity(validationErrorKey, isValid)función .
Angular 1.3 tiene una nueva matriz de validadores $ que puede usar para la validación en lugar de$parserso$formatters.
Angular 1.3 también tiene soporte getter / setter para ngModel
Esta directiva se ejecuta en el nivel de prioridad 1.
Plunker de ejemplo
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:
Esta directiva se ejecuta en el nivel de prioridad 0.
Plunker de ejemplo
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 duda entre usar ng-bindo ng-model, intente responder estas preguntas:
¿ Solo necesita mostrar datos?
Sí: ng-bind (enlace unidireccional)
No: ng-model (enlace bidireccional)
¿Necesita enlazar contenido de texto (y no valor)?
Si: ng-bind
No: ng-model (no debe usar ng-bind donde se requiere valor)
¿Tu etiqueta es HTML
<input>?
Sí: ng-model (no puede usar ng-bind con <input>etiqueta)
No: ng-bind
ng-model
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 bidireccional. Si desea comprender mejor los enlaces 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 unidireccional utilizado para mostrar el valor dentro del componente html como HTML interno. Esta directiva no se puede usar para enlazar con la variable sino 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 usualmente se usa para etiquetas de entrada para enlazar una variable que podemos cambiar desde una variable del controlador y una página html, pero ngBind se usa para mostrar una variable en una página html y podemos cambiar una variable solo desde el controlador y html solo muestra la variable.
Podemos usar ng-bind with <p>para mostrar, podemos usar atajos para ng-bind {{model}}, no podemos usar ng-bind con controles de entrada html, pero podemos usar atajos 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>