目前，我正在學(xué)習(xí)AngularJS和我難以理解的區(qū)別ng-bind和ng-model。誰能告訴我它們的區(qū)別以及何時應(yīng)使用另一種？
3 回答
慕絲7291255
TA貢獻(xiàn)1859條經(jīng)驗 獲得超6個贊
tosh的答案很好地成為了問題的核心。這是一些其他信息。
篩選器和格式化程序
ng-bind并且ng-model都有其輸出給用戶之前，把數(shù)據(jù)的概念。為此，請ng-bind使用過濾器，而要ng-model使用格式化程序。
過濾器（ng-bind）
使用ng-bind，您可以使用過濾器來轉(zhuǎn)換數(shù)據(jù)。例如，
<div ng-bind="mystring | uppercase"></div>，
或更簡單地說：
<div>{{mystring | uppercase}}</div>
請注意，這uppercase是一個內(nèi)置的角度濾鏡，盡管您也可以構(gòu)建自己的濾鏡。
格式化程序（ng-model）
要創(chuàng)建ng-model格式化程序，請創(chuàng)建一個require: 'ngModel'do指令，該指令允許該指令訪問ngModel的controller。例如：
app.directive('myModelFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, controller) {
controller.$formatters.push(function(value) {
return value.toUpperCase();
});
}
}
}
然后在您的部分：
<input ngModel="mystring" my-model-formatter />
這本質(zhì)上是ng-model什么樣的等效uppercase 過濾器在做ng-bind上面的例子。
解析器
現(xiàn)在，如果您打算允許用戶更改值，該mystring怎么辦？ng-bind從模型 -> 視圖只有一種方式綁定。但是，ng-model可以從視圖 -> 模型進(jìn)行綁定，這意味著您可以允許用戶更改模型的數(shù)據(jù)，并且使用解析器可以以簡化的方式格式化用戶的數(shù)據(jù)?？雌饋硐襁@樣：
app.directive('myModelFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, controller) {
controller.$parsers.push(function(value) {
return value.toLowerCase();
});
}
}
}
播放ng-model格式化程序/解析器示例的實時調(diào)試器
還有什么？
ng-model還具有內(nèi)置驗證。只需修改您的$parsers或$formatters函數(shù)即可調(diào)用ngModel的controller.$setValidity(validationErrorKey, isValid)函數(shù)。
Angular 1.3有一個新的$ validators數(shù)組，您可以使用它代替$parsersor進(jìn)行驗證$formatters。
Angular 1.3還具有對ngModel的getter / setter支持
- 3 回答
- 0 關(guān)注
- 925 瀏覽
添加回答
舉報
0/150
提交
取消