554

Şu anda AngularJS öğreniyorum ve arasındaki farkı anlamakta zorluk çekiyorum ng-bind ve ng-model.

Biri bana nasıl farklı olduklarını ve birinin diğeri üzerinde ne zaman kullanılması gerektiğini söyleyebilir mi?

angularjs angular-ngmodel ng-bind

— seslendirmeleri
kaynak

831

ng-bind tek yönlü veri bağlama özelliğine sahiptir ($ scope -> view). Değişken adı {{ val }} olan html'ye $scope.valeklenen kapsam değerini gösteren bir kısayola sahiptir val.

ng-model , form öğelerinin içine yerleştirilmek üzere tasarlanmıştır ve iki yönlü veri bağlaması vardır ($ scope -> görünüm ve görünüm -> $ kapsam) <input ng-model="val"/>.

— uydurma
kaynak

80

Teşekkürler. Ng-bind'in yalnızca görüntülenecek değerin kullanıcı girişi gerektirmediği durumlarda gerekli olduğunu varsaymak makul bir varsayımdır. Ve ng-modal bunu yapan değerler (<input>) için kullanılır. Açısal belgeler bunu öneriyor gibi görünüyor ama daha iyi bir anlayış peşindeyim.

— dubs

24

@Marc Aslında ng-bind değeri değerini değil, öğenin metin içeriğini bağlar. Bu nedenle, <input> öğelerinde kullanılamaz.

— trogdor

21

@Marc, bu durumda şunu kullanın: <input type = "text" value = "{{prop}}" />

— John Kurlak

3

@JakubBarczyk {{:: va}} bir kez bağlayıcıdır, tek yönlü değildir.

— Vlad Bezden

2

@Wachburn Tek yönlü ama tek seferde daha önemli. Model herhangi bir değer aldıktan sonra model değişikliklerini izlemeyi durdurur. Dolayısıyla, düzenli tek yönlü bağlanmaya ihtiyacımız varsa, tek yönlü ciltleme olarak kullanılamaz.

— Ruslan Stelmachenko

141

tosh'un cevabı sorunun kalbine güzelce ulaşıyor. İşte bazı ek bilgiler ....

Filtreler ve Formatlayıcılar

ng-bindve ng-modelher ikisinin de verileri kullanıcıya vermeden önce dönüştürme kavramı vardır. Bu amaçla, ng-bindkullandığı filtreleri ise ng-modelkullandığı biçemleyicilerle .

filtre (ng-bağlama)

İle ng-bind, verilerinizi dönüştürmek için bir filtre kullanabilirsiniz . Örneğin,

<div ng-bind="mystring | uppercase"></div>,

veya daha basit:

<div>{{mystring | uppercase}}</div>

Not uppercaseyerleşik bir açısal filtresi , ayrıca rağmen kendi filtreyi oluşturmak .

biçimlendirici (ng-model)

Bir ng-modeli formatlayıcı oluşturmak için require: 'ngModel', bu direktifin ngModel'in erişimine izin veren bir direktif oluşturursunuz controller. Örneğin:

app.directive('myModelFormatter', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, controller) {
     controller.$formatters.push(function(value) {
        return value.toUpperCase();
      });
    }
  }
}

Sonra kısmi olarak:

<input ngModel="mystring" my-model-formatter />

Bu esasen yukarıdaki örnekte filtrenin yaptıklarına ng-modeleşdeğerdir .uppercase ng-bind

ayrıştırıcılar

Şimdi, kullanıcının değerini değiştirmesine izin vermeyi planlıyorsanız ne olur mystring? model -> görünümündenng-bind sadece tek yönlü bağlama vardır . Ancak, görünüm -> modelinden bağlanabilir, bu da kullanıcının modelin verilerini değiştirmesine izin verebileceğiniz anlamına gelir ve bir ayrıştırıcı kullanarak kullanıcının verilerini modern bir şekilde biçimlendirebilirsiniz. İşte böyle görünüyor:ng-model

app.directive('myModelFormatter', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, controller) {
     controller.$parsers.push(function(value) {
        return value.toLowerCase();
      });
    }
  }
}

ng-modelFormatlayıcı / ayrıştırıcı örneklerinin canlı bir dalgıçıyla oynayın

Başka?

ng-modelayrıca yerleşik doğrulama vardır. Basitçe değiştirmek $parsersveya $formattersçağrılacak işlevi ngModel 'in controller.$setValidity(validationErrorKey, isValid)fonksiyonu .

Açısal 1.3,$parsers veyayerine doğrulama için kullanabileceğiniz yeni bir $ validators dizisine sahiptir$formatters.

Angular 1.3 ayrıca ngModel için alıcı / ayarlayıcı desteğine sahiptir

— Gil Birman
kaynak

7

+ 1. Ek bilgi için teşekkürler. Hızlı bir cevap (Tosh) ve daha sonra muhakeme / kullanım durumlarında daha fazlasını öğrenmek / anlamak için sizin gibi detaylı bir NEDEN & NASIL yanıtı olması her zaman iyi / harika.

— redfox05

30

ngModel

NgModel yönergesi, girdi, select, textarea (veya özel form denetimi) kapsamındaki bir özelliğe bağlar.

Bu yönerge öncelik seviyesi 1'de yürütülür.

Örnek 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 şunlardan sorumludur:

Görünümü, girdi, metin alanı veya seçim gibi diğer yönergelerin gerektirdiği modele bağlamak.
Doğrulama davranışı sağlama (yani gerekli, sayı, e-posta, url).
Kontrolün durumunu koruma (geçerli / geçersiz, kirli / bozulmamış, dokunulmuş / dokunulmamış, doğrulama hataları).
Animasyonlar dahil olmak üzere öğe üzerinde ilgili css sınıflarını ayarlama (ng-geçerli, ng-geçersiz, ng-kirli, ng-bozulmamış, ng-dokunulmuş, ng-dokunulmamış).
Kontrolü ana formuyla kaydetme.

ngBind

NgBind özelliği, Angular'a belirtilen HTML öğesinin metin içeriğini belirli bir ifadenin değeriyle değiştirmesini ve bu ifadenin değeri değiştiğinde metin içeriğini güncellemesini söyler.

Bu yönerge öncelik seviyesi 0'da yürütülür.

Örnek 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 şunlardan sorumludur:

Belirtilen HTML öğesinin metin içeriğini belirli bir ifadenin değeri ile değiştirme.

— Subodh Ghulaxe
kaynak

Bu kapsamlı yanıtı takdir etsem de, önceden seçilen cevabım , farkı anlamak için yeterli bilgi sağladığından kalacak .

— dubs

8

ng-bindVeya tuşunu kullanarak tereddüt ediyorsanız ng-model, aşağıdaki soruları yanıtlamaya çalışın:

Eğer Do sadece gereken görüntüleme verilerinin?

Evet: ng-bind (tek yönlü ciltleme)
Hayır: ng-model (iki yönlü ciltleme)

Eğer gerekiyor mu metin içeriğini bağlamak (ve değeri)?

Evet: ng-bind
Hayır: ng-model (değerin gerektiği yerlerde ng-bind kullanmamalısınız)

Etiketiniz bir HTML <input>mi?

Evet: ng-model (ng-bind <input>etiketli kullanamazsınız )
Hayır: ng-bind

— Mistalis
kaynak

6

ng model

AngularJS'deki ng-model yönergesi, giriş bileşenleriyle uygulamada kullanılan değişkenleri bağlamak için en büyük güçlerden biridir. Bu, iki yönlü veri bağlama işlevi görür. İki yönlü bağlamalar hakkında daha iyi anlamak istiyorsanız, bir giriş bileşeniniz vardır ve bu alanda güncellenen değer uygulamanın diğer bölümüne yansıtılmalıdır. Daha iyi çözüm, bir değişkeni o alana bağlamak ve uygulamadan güncellenen değeri görüntülemek istediğiniz yere bu değişkeni çıkarmaktır.

ng-bağlama

ng-bind, ng-modelinden çok farklı çalışır. ng-bind, html bileşeni içindeki değeri iç HTML olarak görüntülemek için kullanılan bir yol veri bağlamasıdır. Bu yönerge, değişkene bağlanmak için değil, yalnızca HTML öğelerinin içeriğiyle bağlanmak için kullanılabilir. Infact, bileşeni HTML öğelerine bağlamak için ng-model ile birlikte kullanılabilir. Bu yönerge, div, span vb. Blokları dahili HTML içeriğiyle güncellemek için çok kullanışlıdır.

Bu örnek anlamanıza yardımcı olacaktır.

— Krishna
kaynak

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>

Snippet'i genişlet

— Ramanathan'ın
kaynak

2

ngModel genellikle denetleyiciden ve html sayfasından değişkeni değiştirebileceğimiz bir değişkeni bağlamak için giriş etiketleri için kullanılır, ancak ngBind , html sayfasında bir değişkeni görüntülemek için kullanılır ve değişkeni yalnızca denetleyiciden değiştirebilir ve html değişkeni göster değişkenini gösterir.

— pejman
kaynak

1

Ng-bind ile <p>görüntülemek için kullanabiliriz, kısayolunu ng-bind {{model}}kullanabiliriz, ng-bind'i html giriş kontrolleri ng-bind {{model}}ile kullanamayız, ancak html giriş kontrolleri için kısayolu kullanabiliriz .

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

Ng-model ve ng-bind arasındaki fark nedir