Jaka jest różnica między ng-model a ng-bind

554

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?

dubs
źródło

Odpowiedzi:

831

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

Bzdury
źródło
80
Dzięki tosh. Czy słusznym założeniem byłoby stwierdzenie, że ng-bind jest wymagany tylko wtedy, gdy wyświetlana wartość nie wymaga wprowadzania danych przez użytkownika. I, ng-modal byłby używany dla wartości (<wejście>), które to robią. Dokumentacja kątowa wydaje się to sugerować, ale szukam lepszego zrozumienia.
dubs
24
@Marc W rzeczywistości ng-bind wiąże tekstową treść elementu, a nie jego wartość. Z tego powodu nie można go używać w elementach <input>.
trogdor
21
@Marc, w takim przypadku wystarczy użyć: <input type = "text" value = "{{prop}}" />
John Kurlak
3
@JakubBarczyk {{:: va}} jest jednorazowo wiążący, a nie jednokierunkowy.
Vlad Bezden
2
@Wachburn Jest to jednorazowe, ale ważniejsze jest jednorazowe. Przestaje obserwować zmiany modelu po tym, jak model przyjmie jakąkolwiek wartość. Dlatego nie można go używać jako wiązania jednokierunkowego, jeśli potrzebujemy regularnego wiązania jednokierunkowego.
Ruslan Stelmachenko
141

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

Gil Birman
źródło
7
+ 1. Dzięki za dodatkowe informacje. Zawsze dobrze / wspaniale jest mieć szybką odpowiedź (Tosh's), a następnie szczegółową odpowiedź DLACZEGO i JAK, aby dowiedzieć się / zrozumieć więcej w przypadkach uzasadnienia / użycia.
redfox05,
30

ngModel

Dyrektywa ngModel wiąże dane wejściowe, select, textarea (lub formant niestandardowy) z właściwością w zakresie.

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

Atrybut ngBind mówi Angularowi, aby zastąpił treść tekstową określonego elementu HTML wartością danego wyrażenia i zaktualizował treść tekstową, gdy zmieni się wartość tego wyrażenia.

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.
Subodh Ghulaxe
źródło
Chociaż doceniam tę dokładną odpowiedź, moja poprzednio wybrana odpowiedź pozostanie, ponieważ dostarczyła tylko wystarczających informacji, aby zrozumieć różnicę.
dubs
8

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

Mistalis
źródło
6

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

Kryszna
źródło
5

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>

ramanathan
źródło
2

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

pejman
źródło
1

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>
Vikash Ranjan Jha
źródło