Obecnie uczę się AngularJS i mam trudności ze zrozumieniem różnicy między ng-bindi ng-model.

Czy ktoś może mi powiedzieć, czym się różnią i kiedy należy stosować jeden nad drugim?

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 ....

Filtry i formaty

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 .

filtruj (ng-bind)

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 .

formatyzator (model ng)

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.

Parsery

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

Co jeszcze?

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.

Angular 1.3 ma także obsługę getter / setter dla ngModel

ngModel

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:

• Wiązanie widoku z modelem, którego wymagają inne dyrektywy, takie jak input, textarea lub select.
• Zapewnienie zachowania sprawdzania poprawności (tj. Wymagane, numer, adres e-mail, adres URL).
• Utrzymywanie stanu kontroli (poprawny / nieprawidłowy, brudny / nieskazitelny, dotknięty / nietknięty, błędy walidacji).
• Ustawianie powiązanych klas css na elemencie (poprawny-ng, poprawny-ng, brudny-ng, nieskazitelny, dotknięty-ng, nietknięty-ng), w tym animacje.
• Rejestrowanie formantu w formie nadrzędnej.

ngBind

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:

• Zamiana treści tekstowej określonego elementu HTML na wartość danego wyrażenia.

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ć.

ngModel zwykle używa tagów wejściowych do wiązania zmiennej, którą możemy zmienić zmienną ze strony kontrolera i html, ale ngBind używa do wyświetlania zmiennej na stronie html i możemy zmieniać zmienną tylko z kontrolera i html, po prostu pokaż zmienną.

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>