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