亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

ng-model和ng-bind有什么區別

ng-model和ng-bind有什么區別

搖曳的薔薇 2019-09-27 16:45:34
目前,我正在學習AngularJS和我難以理解的區別ng-bind和ng-model。誰能告訴我它們的區別以及何時應使用另一種?
查看完整描述

3 回答

?
慕絲7291255

TA貢獻1859條經驗 獲得超6個贊

tosh的答案很好地成為了問題的核心。這是一些其他信息。


篩選器和格式化程序

ng-bind并且ng-model都有其輸出給用戶之前,把數據的概念。為此,請ng-bind使用過濾器,而要ng-model使用格式化程序。


過濾器(ng-bind)

使用ng-bind,您可以使用過濾器來轉換數據。例如,


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


或更簡單地說:


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


請注意,這uppercase是一個內置的角度濾鏡,盡管您也可以構建自己的濾鏡。


格式化程序(ng-model)

要創建ng-model格式化程序,請創建一個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 />

這本質上是ng-model什么樣的等效uppercase 過濾器在做ng-bind上面的例子。


解析器

現在,如果您打算允許用戶更改值,該mystring怎么辦?ng-bind從模型 -> 視圖只有一種方式綁定。但是,ng-model可以從視圖 -> 模型進行綁定,這意味著您可以允許用戶更改模型的數據,并且使用解析器可以以簡化的方式格式化用戶的數據??雌饋硐襁@樣:


app.directive('myModelFormatter', function() {

  return {

    require: 'ngModel',

    link: function(scope, element, attrs, controller) {

     controller.$parsers.push(function(value) {

        return value.toLowerCase();

      });

    }

  }

}

播放ng-model格式化程序/解析器示例的實時調試器


還有什么?

ng-model還具有內置驗證。只需修改您的$parsers或$formatters函數即可調用ngModel的controller.$setValidity(validationErrorKey, isValid)函數。


Angular 1.3有一個新的$ validators數組,您可以使用它代替$parsersor進行驗證$formatters。


Angular 1.3還具有對ngModel的getter / setter支持


查看完整回答
反對 回復 2019-09-27
  • 3 回答
  • 0 關注
  • 934 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號