首頁 > 開發者 > JavaScript
AngularJS1.X學習筆記2-資料繫結詳解，angularjs學習筆記
上一篇從整體上認識了Angular，從現在開始更加深入的學習Angular的特性。本次學習的是資料繫結。應該所有的MVC架構都會用到資料繫結，比如我所知道的ThinkPHP、struts等，只有實現了資料繫結才能將模型層和視圖層分離，實現MVC。Angular的資料繫結比較特別，它支援雙向資料繫結。
1、ng-bind
<!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>databinding1</title></head><body> <h1 ng-controller='dataCtrl' ng-bind='data'> </h1> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script> <script type="text/javascript"> angular.module('myApp',[]) .controller('dataCtrl',function($scope){ $scope.data = "你好啊！"; }) </script></body></html>
ng-bind實現了一個簡單單向綁定。
2、{{}}
類似ng-bind，用的比較多。
<!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>databinding1</title></head><body> <h1 ng-controller='dataCtrl'> {{data}} </h1> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script> <script type="text/javascript"> angular.module('myApp',[]) .controller('dataCtrl',function($scope){ $scope.data = "你好啊！"; }) </script></body></html>
這種綁定的缺點是，開始載入時可能會出現類似{{data}}這樣的東西。
解決方案是使用ng-bind或ng-cloak，ng-cloak應該只在有資料繫結的地方使用，否則處理中使用者將看到空白。
<!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>databinding2</title></head><body ng-cloak> <h1 ng-controller='dataCtrl'> {{data}} </h1> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script> <script type="text/javascript"> angular.module('myApp',[]) .controller('dataCtrl',function($scope){ $scope.data = "你好啊！"; }) </script></body></html>
我測試了一下ng-cloak，不知道為什麼不行，有人知道的話請告知一下。
3、ng-bind-html
這個指令可以用html的方式處理資料，它不會將html代碼解析成實體。下面對比一下ng-bind和ng-bind-html.
<!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>databinding3</title></head><body> <div ng-controller='dataCtrl' ng-bind='data'> </div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script> <script type="text/javascript"> angular.module('myApp',[]) .controller('dataCtrl',function($scope){ $scope.data = "<h1 style='color:red;'>你好啊</h1>"; }) </script></body></html>
<!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>databinding3</title></head><body> <div ng-controller='dataCtrl' ng-bind-html='data'> </div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script> <script type="text/javascript"> angular.module('myApp',[]) .controller('dataCtrl',function($scope){ $scope.data = "<h1 style='color:red;'>你好啊</h1>"; }) </script></body></html>
換成ng-bind-html時出錯了
這是因為Angular預設是不信任html的，所以要這樣做。
<!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>databinding3</title></head><body> <div ng-controller='dataCtrl' ng-bind-html='data'> </div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script> <script type="text/javascript"> angular.module('myApp',[]) .controller('dataCtrl',function($scope,$sce){ $scope.data = $sce.trustAsHtml("<h1 style='color:red;'>你好啊</h1>"); }) </script></body></html
這樣就可以了。
4、ng-bind-template
ng-bind只接受單個資料繫結運算式，而ng-bind-template則相對靈活些。
<!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>databinding3</title></head><body> <div ng-controller='dataCtrl' ng-bind-template='{{data1}}愛{{data2}} '> </div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script> <script type="text/javascript"> angular.module('myApp',[]) .controller('dataCtrl',function($scope,$sce){ $scope.data1 = "我"; $scope.data2 = "中國"; }) </script></body></html><!-- 我愛中國-->
5、ng-non-bindable
有時我們使用了{{}}但是我們並不是要綁定資料，直接用會出錯，所以要像這樣
<!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>databinding1</title></head><body> <h1 ng-controller='dataCtrl' ng-non-bindable> ng中綁定資料的方法是{{data}} </h1> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script> <script type="text/javascript"> angular.module('myApp',[]) .controller('dataCtrl',function($scope){ //$scope.data = "你好啊！"; }) </script></body></html>
6、雙向資料繫結ng-model
雙向資料繫結允許元素從使用者處收集資料以改變程式狀態。
<!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>databinding5</title></head><body> <div ng-controller='dataCtrl'> <h1>{{data}}</h1> <input type="text" name="data" ng-model="data"> </div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script> <script type="text/javascript"> angular.module('myApp',[]) .controller('dataCtrl',function($scope){ $scope.data = "你好啊！"; }) </script></body></html>
你會發現文字框的內容和h1中的內容同步變化。
7、小結一下
與資料繫結的相關指令如下
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
