Risposte:
ng-bind ha un'associazione dati unidirezionale ($ scope -> view). Ha un collegamento {{ val }}
che visualizza il valore dell'ambito $scope.valinserito in HTML dove valè presente un nome variabile.
ng-model è pensato per essere inserito all'interno degli elementi del modulo e ha un'associazione dati bidirezionale ($ scope -> view and view -> $ scope) ad es <input ng-model="val"/>.
La risposta di tosh arriva benissimo al nocciolo della domanda. Ecco alcune informazioni aggiuntive ....
ng-binded ng-modelentrambi hanno il concetto di trasformare i dati prima di trasmetterli per l'utente. A tal fine, ng-bindutilizza i filtri , mentre ng-modelutilizza i formattatori .
Con ng-bind, puoi usare un filtro per trasformare i tuoi dati. Per esempio,
<div ng-bind="mystring | uppercase"></div>,
o più semplicemente:
<div>{{mystring | uppercase}}</div>
Si noti che uppercaseè un filtro angolare incorporato , sebbene sia possibile anche creare il proprio filtro .
Per creare un formattatore ng-model, si crea una direttiva che lo faccia require: 'ngModel', che consente a quella direttiva di accedere a ngModel controller. Per esempio:
app.directive('myModelFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, controller) {
controller.$formatters.push(function(value) {
return value.toUpperCase();
});
}
}
}Quindi nel tuo parziale:
<input ngModel="mystring" my-model-formatter />Questo è essenzialmente l' ng-modelequivalente di ciò che sta facendo il uppercase filtrong-bind nell'esempio sopra.
Ora, cosa succede se si prevede di consentire all'utente di modificare il valore di mystring? ng-bindha solo un modo vincolante, dal modello -> vista . Tuttavia, è ng-modelpossibile associare dalla vista -> modello, il che significa che è possibile consentire all'utente di modificare i dati del modello e, utilizzando un parser, è possibile formattare i dati dell'utente in modo semplificato. Ecco come appare:
app.directive('myModelFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, controller) {
controller.$parsers.push(function(value) {
return value.toLowerCase();
});
}
}
}Gioca con un plunker dal vivo degli esempi di ng-modelformattatore / parser
ng-modelha anche la convalida integrata. È sufficiente modificare il vostro $parserso $formattersla funzione di chiamare ngModel 's controller.$setValidity(validationErrorKey, isValid)funzione .
Angular 1.3 ha un nuovo array $ validators che puoi usare per la validazione invece di$parserso$formatters.
Angular 1.3 ha anche il supporto getter / setter per ngModel
Questa direttiva viene eseguita al livello di priorità 1.
Esempio 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 è responsabile di:
Questa direttiva viene eseguita al livello di priorità 0.
Esempio 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 è responsabile di:
Se esiti tra l'uso di ng-bindo ng-model, prova a rispondere a queste domande:
Avete solo bisogno di visualizzazione dei dati?
Sì: ng-bind (rilegatura a senso unico)
No: ng-model (rilegatura bidirezionale)
Devi associare il contenuto del testo (e non valorizzarlo)?
Sì: ng-bind
No: ng-model (non dovresti usare ng-bind dove è richiesto un valore)
Il tuo tag è un HTML
<input>?
Sì: ng-model (non è possibile utilizzare ng-bind con <input>tag)
No: ng-bind
ng-model
La direttiva ng-model in AngularJS è uno dei maggiori punti di forza per legare le variabili utilizzate nell'applicazione con i componenti di input. Funziona come associazione dati bidirezionale. Se vuoi capire meglio le associazioni a due vie, hai un componente di input e il valore aggiornato in quel campo deve essere riflesso in un'altra parte dell'applicazione. La soluzione migliore è associare una variabile a quel campo e generare quella variabile ovunque si desideri visualizzare il valore aggiornato attraverso l'applicazione.
ng-bind
ng-bind funziona in modo molto diverso da ng-model. ng-bind è l'associazione di dati unidirezionale utilizzata per visualizzare il valore all'interno del componente html come HTML interno. Questa direttiva non può essere utilizzata per l'associazione con la variabile ma solo con il contenuto degli elementi HTML. Infatti, questo può essere usato insieme a ng-model per associare il componente agli elementi HTML. Questa direttiva è molto utile per aggiornare i blocchi come div, span, ecc. Con contenuto HTML interno.
Questo esempio ti aiuterebbe a capire.
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>Possiamo usare ng-bind con <p>per visualizzare, possiamo usare la scorciatoia per ng-bind {{model}}, non possiamo usare ng-bind con i controlli di input html, ma possiamo usare la scorciatoia ng-bind {{model}}con i controlli di input 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>