Odpowiedzi:
ng-bind ma jednokierunkowe wiązanie danych ($ scope -> view). Ma skrót, {{ val }}
który wyświetla wartość zakresu $scope.valwstawioną do html, gdzie valjest nazwa zmiennej.
ng-model jest przeznaczony do umieszczania wewnątrz elementów formularza i ma dwukierunkowe wiązanie danych ($ scope -> view and view -> $ scope) np <input ng-model="val"/>.
odpowiedź Tosha trafnie trafia w sedno pytania. Oto dodatkowe informacje ....
ng-bindi ng-modeloba mają pojęcie przekształcania danych przed wysłaniem ich do użytkownika. W tym celu ng-bindużywa filtrów , podczas gdy ng-modelużywa formatów .
Za ng-bindpomocą filtra możesz przekształcić swoje dane. Na przykład,
<div ng-bind="mystring | uppercase"></div>,
lub prościej:
<div>{{mystring | uppercase}}</div>
Pamiętaj, że uppercasejest to wbudowany filtr kątowy , chociaż możesz również zbudować własny filtr .
Aby utworzyć formatyzator modelu ng, należy utworzyć dyrektywę, która to robi require: 'ngModel', która pozwala tej dyrektywie uzyskać dostęp do ngModela controller. Na przykład:
app.directive('myModelFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, controller) {
controller.$formatters.push(function(value) {
return value.toUpperCase();
});
}
}
}Następnie w częściowym:
<input ngModel="mystring" my-model-formatter />Jest to zasadniczo ng-modelodpowiednik tego, co robi uppercase filtr w ng-bindpowyższym przykładzie.
Co teraz, jeśli planujesz zezwolić użytkownikowi na zmianę wartości mystring? ng-bindma tylko jedno wiązanie, od modelu -> widok . Jednakże, ng-modelmoże wiązać się z widzenia -> modelowe co oznacza, że może zezwolić użytkownikowi na zmianę danych modelki i za pomocą parsera można sformatować dane użytkownika w usprawniony sposób. Oto jak to wygląda:
app.directive('myModelFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, controller) {
controller.$parsers.push(function(value) {
return value.toLowerCase();
});
}
}
}Graj z działką na żywo przykładów ng-modelformatera / parsera
ng-modelma również wbudowane sprawdzanie poprawności. Wystarczy zmodyfikować $parserslub $formattersfunkcję zadzwonić ngModel jest controller.$setValidity(validationErrorKey, isValid)funkcja .
Angular 1.3 ma nową tablicę $ validators, której można użyć do sprawdzania poprawności zamiast$parserslub$formatters.
Niniejsza dyrektywa obowiązuje na poziomie priorytetu 1.
Przykład 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 odpowiada za:
Niniejsza dyrektywa wykonuje się na poziomie priorytetu 0.
Przykład 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 odpowiada za:
Jeśli wahasz się przed użyciem ng-bindlub ng-model, spróbuj odpowiedzieć na następujące pytania:
Czy potrzebujesz tylko wyświetlać dane?
Tak: ng-bind (wiązanie w jedną stronę)
Nie: ng-model (wiązanie dwustronne)
Czy potrzebujesz powiązać treść tekstową (a nie wartość)?
Tak: ng-bind
Nie: ng-model (nie należy używać ng-bind tam, gdzie wymagana jest wartość)
Czy Twój tag to HTML
<input>?
Tak: ng-model (nie można używać ng-bind z <input>tagiem)
Nie: ng-bind
model ng
Dyrektywa ng-model w AngularJS jest jedną z największych zalet wiązania zmiennych używanych w aplikacji ze składnikami wejściowymi. Działa to jako dwukierunkowe wiązanie danych. Jeśli chcesz lepiej zrozumieć powiązania dwukierunkowe, masz komponent wejściowy, a wartość zaktualizowana w tym polu musi zostać odzwierciedlona w innej części aplikacji. Lepszym rozwiązaniem jest powiązanie zmiennej z tym polem i wyprowadzenie tej zmiennej za każdym razem, gdy chcesz wyświetlić zaktualizowaną wartość w aplikacji.
ng-bind
ng-bind działa znacznie inaczej niż model ng. ng-bind to jeden ze sposobów powiązania danych służący do wyświetlania wartości w składniku HTML jako wewnętrzny HTML. Ta dyrektywa nie może być używana do wiązania ze zmienną, ale tylko z zawartością elementów HTML. W rzeczywistości można tego użyć wraz z ng-model do powiązania komponentu z elementami HTML. Ta dyrektywa jest bardzo przydatna do aktualizowania bloków takich jak div, span itp. Wewnętrzną zawartością HTML.
Ten przykład pomoże ci zrozumieć.
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>Możemy użyć ng-bind z <p>do wyświetlania, możemy użyć skrótu do ng-bind {{model}}, nie możemy użyć ng-bind z kontrolkami wejściowymi HTML, ale możemy użyć skrótu ng-bind {{model}}z kontrolkami wejściowymi 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>