這篇文章將為大家詳細講解有關AngularJS1.X中數據綁定的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
1、ng-bind
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>databinding1</title>
</head>
<body>
<h2 ng-controller='dataCtrl' ng-bind='data'>
</h2>
<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>
<h2 ng-controller='dataCtrl'>
{{data}}
</h2>
<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>
<h2 ng-controller='dataCtrl'>
{{data}}
</h2>
<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 = "<h2 style='color:red;'>你好啊</h2>";
})
</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 = "<h2 style='color:red;'>你好啊</h2>";
})
</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("<h2 style='color:red;'>你好啊</h2>");
})
</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>
<h2 ng-controller='dataCtrl' ng-non-bindable>
ng中綁定數據的方法是{{data}}
</h2>
<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'>
<h2>{{data}}</h2>
<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>
你會發現文本框的內容和h2中的內容同步變化。
7、小結一下
與數據綁定的相關指令如下
關于“AngularJS1.X中數據綁定的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
