AngularJS1.X學習筆記2-數(shù)據(jù)綁定詳解
上一篇從整體上認識了Angular,從現(xiàn)在開始更加深入的學習Angular的特性。本次學習的是數(shù)據(jù)綁定。應該所有的MVC框架都會用到數(shù)據(jù)綁定,比如我所知道的ThinkPHP、struts等,只有實現(xiàn)了數(shù)據(jù)綁定才能將模型層和視圖層分離,實現(xiàn)MVC。Angular的數(shù)據(jù)綁定比較特別,它支持雙向數(shù)據(jù)綁定。
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實現(xiàn)了一個簡單單向綁定。
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>
這種綁定的缺點是,開始加載時可能會出現(xiàn)類似{{data}}這樣的東西。
解決方法是使用ng-bind或ng-cloak,ng-cloak應該只在有數(shù)據(jù)綁定的地方使用,否則處理中用戶將看到空白。
<!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的方式處理數(shù)據(jù),它不會將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只接受單個數(shù)據(jù)綁定表達式,而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
有時我們使用了{{}}但是我們并不是要綁定數(shù)據(jù),直接用會出錯,所以要像這樣
<!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中綁定數(shù)據(jù)的方法是{{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、雙向數(shù)據(jù)綁定ng-model
雙向數(shù)據(jù)綁定允許元素從用戶處收集數(shù)據(jù)以改變程序狀態(tài)。
<!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>
你會發(fā)現(xiàn)文本框的內(nèi)容和h1中的內(nèi)容同步變化。
7、小結(jié)一下
與數(shù)據(jù)綁定的相關(guān)指令如下
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- 詳談AngularJs 控制器、數(shù)據(jù)綁定、作用域
- 深入淺析AngularJS中的一次性數(shù)據(jù)綁定 (bindonce)
- AngularJS框架中的雙向數(shù)據(jù)綁定機制詳解【減少需要重復的開發(fā)代碼量】
- AngularJS入門教程之數(shù)據(jù)綁定原理詳解
- AngularJS入門教程之數(shù)據(jù)綁定用法示例
- AngularJS 雙向數(shù)據(jù)綁定詳解簡單實例
- AngularJS實踐之使用NgModelController進行數(shù)據(jù)綁定
- 詳解JavaScript的AngularJS框架中的作用域與數(shù)據(jù)綁定
- angularjs學習筆記之雙向數(shù)據(jù)綁定
- Angularjs中數(shù)據(jù)綁定的實例詳解
相關(guān)文章
ionic4+angular7+cordova上傳圖片功能的實例代碼
ionic是一個垮平臺開發(fā)框架,可通過web技術(shù)開發(fā)出多平臺的應用。這篇文章主要介紹了ionic4+angular7+cordova上傳圖片功能,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-06-06angularJS?實現(xiàn)長按不觸發(fā)點擊事件可以復制剪貼方法
這篇文章主要為大家介紹了angularJS實現(xiàn)長按不觸發(fā)點擊事件可以復制剪貼方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06angularjs的單選框+ng-repeat的實現(xiàn)方法
今天小編就為大家分享一篇angularjs的單選框+ng-repeat的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09