Note05--双向数据绑定
2017-01-24 02:04
211 查看
1. 双向指的是：数据模型--》视图；视图--》数据模型；
2. 绑定的方式：
a. Ng-bind 或者 双括号；
i. 双括号方式，在网络不好的情况下，会出现双括号显示在页面中；
ii. 使用ng-bind方式而不是{{ ** }}方式绑定值；
b. 两者使用的原则：
i. 在首页index.html中，使用ng-bind方式，之后使用双括号方式就可以避免这种问题；原因是一般在首页上加载angular库，之后的页面都全部由angular管理，这样之后双括号就OK了；
3. 为什么需要双向数据绑定？
a. 使用场景：Form表单；
b. e.g.
i. Form.html<!doctype html> <html ng-app="UserInfoModule"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css"> <script src="js/angular-1.3.0.js"></script> <script src="Form.js"></script> </head> <body> <div class="panel panel-primary"> <div class="panel-heading"> <div class="panel-title">双向数据绑定</div> </div> <div class="panel-body"> <div class="row"> <div class="col-md-12"> <form class="form-horizontal" role="form" ng-controller="UserInfoCtrl"> <div class="form-group"> <label class="col-md-2 control-label"> 邮箱： </label> <div class="col-md-10"> <input type="email" class="form-control" placeholder="推荐使用126邮箱" ng-model="userInfo.email"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label"> 密码： </label> <div class="col-md-10"> <input type="password" class="form-control" placeholder="只能是数字、字母、下划线" ng-model="userInfo.password"> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <div class="checkbox"> <label> <input type="checkbox" ng-model="userInfo.autoLogin">自动登录 </label> </div> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <button class="btn btn-default" ng-click="getFormData()">获取Form表单的值</button> <button class="btn btn-default" ng-click="setFormData()">设置Form表单的值</button> <button class="btn btn-default" ng-click="resetForm()">重置表单</button> </div> </div> </form> </div> </div> </div> </div> </body> </html>
ii. Form.js
var userInfoModule = angular.module('UserInfoModule', []);
userInfoModule.controller('UserInfoCtrl', ['$scope',
function($scope) {
$scope.userInfo = {
email: "253445528@qq.com",
password: "253445528",
autoLogin: true
};
$scope.getFormData = function() {
console.log($scope.userInfo);
};
$scope.setFormData = function() {
$scope.userInfo = {
email: 'damoqiongqiu@126.com',
password: 'damoqiongqiu',
autoLogin: false
}
};
$scope.resetForm = function() {
$scope.userInfo = {
email: "253445528@qq.com",
password: "253445528",
autoLogin: true
};
}
}
])c. 一个双向数据绑定常用的例子：通过绑定的值改变样式或者其他 i. CSS1.html
<!doctype html>
<html ng-app="MyCSSModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="CSS1.css">
</head>
<body>
<div ng-controller="CSSCtrl">
<p class="text-{{color}}">测试CSS样式</p>
<button class="btn btn-default" ng-click="setGreen()">绿色</button>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="CSS1.js"></script>
</html>ii. CSS1.js
var myCSSModule = angular.module('MyCSSModule', []);
myCSSModule.controller('CSSCtrl', ['$scope',
function($scope) {
$scope.color = "red";
$scope.setGreen = function() {
$scope.color = "green";
}
}
])iii. CSS1.css
.text-red {
background-color: #ff0000;
}
.text-green {
background-color: #00ff00;
}4. Ng-class： 可以接受表达式； a. NgClass.html
<!doctype html>
<html ng-app="MyCSSModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="NgClass.css">
</head>
<body>
<div ng-controller='HeaderController'>
<div ng-class='{error: isError, warning: isWarning}'>{{messageText}}</div>
<button ng-click='showError()'>Simulate Error</button>
<button ng-click='showWarning()'>Simulate Warning</button>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="NgClass.js"></script>
</html>b. NgClass.js
var myCSSModule = angular.module('MyCSSModule', []);
myCSSModule.controller('HeaderController', ['$scope',
function($scope) {
$scope.isError = false;
$scope.isWarning = false;
$scope.showError = function() {
$scope.messageText = 'This is an error!';
$scope.isError = true;
$scope.isWarning = false;
};
$scope.showWarning = function() {
$scope.messageText = 'Just a warning. Please carry on.';
$scope.isWarning = true;
$scope.isError = false;
};
}
])c. NgClass.css
.error {
background-color: red;
}
.warning {
background-color: yellow;
}5. Ng-show 和 ng-hide控制显示和隐藏 a. NgShow.html
<!doctype html> <html ng-app="MyCSSModule"> <head> <meta charset="utf-8"> </head> <body> <div ng-controller='DeathrayMenuController'> <button ng-click='toggleMenu()'>Toggle Menu</button> <ul ng-show='menuState.show'> <li ng-click='stun()'>Stun</li> <li ng-click='disintegrate()'>Disintegrate</li> <li ng-click='erase()'>Erase from history</li> </ul> <div/> </body> <script src="js/angular-1.3.0.js"></script> <script src="NgShow.js"></script> </html>
b. NgShow.js
var myCSSModule = angular.module('MyCSSModule', []);
myCSSModule.controller('DeathrayMenuController', ['$scope',
function($scope) {
$scope.menuState={show:false};
$scope.toggleMenu = function() {
$scope.menuState.show = !$scope.menuState.show;
};
}
])6. Ng-animate a. http://css.doyoe.com b. E.g. i. Index.html
<!doctype html>
<html ng-app="bookStoreApp">
<head>
<meta charset="UTF-8">
<title>BookStore</title>
<link rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.theme.min.css">
<link rel="stylesheet" href="css/index.css">
<script src="framework/1.3.0.14/angular.js"></script>
<script src="framework/1.3.0.14/angular-route.js"></script>
<script src="framework/1.3.0.14/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
</head>
<body>
<div class="page {{pageClass}}" ng-view>
</div>
</body>
</html>ii. Index.css
.page {
bottom:0;
padding-top:200px;
position:absolute;
text-align:center;
top:0;
width:100%;
}
.page h1 {
font-size:60px;
}
.page a {
margin-top:50px;
}
.hello {
background:#00D0BC;
color:#FFFFFF;
}
.list{
background:#E59400;
color:#FFFFFF;
}
@keyframes rotateFall {
0% {
transform: rotateZ(0deg);
}
20% {
transform: rotateZ(10deg);
animation-timing-function: ease-out;
}
40% {
transform: rotateZ(17deg);
}
60% {
transform: rotateZ(16deg);
}
100% {
transform: translateY(100%) rotateZ(17deg);
}
}
@keyframes slideOutLeft {
to {
transform: translateX(-100%);
}
}
@keyframes rotateOutNewspaper {
to {
transform: translateZ(-3000px) rotateZ(360deg);
opacity: 0;
}
}
@keyframes scaleUp {
from {
opacity: 0.3;
-webkit-transform: scale(0.8);
}
}
@keyframes slideInRight {
from {
transform:translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes slideInUp {
from {
transform:translateY(100%);
}
to {
transform: translateY(0);
}
}
.ng-enter {
z-index: 8888;
}
.ng-leave {
z-index: 9999;
}
.hello.ng-enter {
animation: scaleUp 0.5s both ease-in;
}
.hello.ng-leave {
transform-origin: 0% 0%;
animation: rotateFall 1s both ease-in;
}
.list.ng-enter {
animation:slideInRight 0.5s both ease-in;
}
.list.ng-leave {
animation:slideOutLeft 0.5s both ease-in;
}iii. App.js
var bookStoreApp = angular.module('bookStoreApp', [
'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters',
'bookStoreServices', 'bookStoreDirectives'
]);
bookStoreApp.config(function($routeProvider) {
$routeProvider.when('/hello', {
templateUrl: 'tpls/hello.html',
controller: 'HelloCtrl'
}).when('/list', {
templateUrl: 'tpls/bookList.html',
controller: 'BookListCtrl'
}).otherwise({
redirectTo: '/hello'
})
});iv. Controllers.js
var bookStoreCtrls = angular.module('bookStoreCtrls', []);
bookStoreCtrls.controller('HelloCtrl', ['$scope',
function($scope) {
$scope.greeting = {
text: 'Hello'
};
$scope.pageClass="hello";
}
]);
bookStoreCtrls.controller('BookListCtrl', ['$scope',
function($scope) {
$scope.books = [{
title: "《Ext江湖》",
author: "大漠穷秋"
}, {
title: "《ActionScript游戏设计基础（第二版）》",
author: "大漠穷秋"
}, {
title: "《用AngularJS开发下一代WEB应用》",
author: "大漠穷秋"
}];
$scope.pageClass="list";
}
]);
/**
* 这里接着往下写，如果控制器的数量非常多，需要分给多个开发者，可以借助于grunt来合并代码
*/v. Services.js
var bookStoreServices = angular.module('bookStoreServices', []);
bookStoreServices.service('bookStoreService_1', ['$scope',
function($scope) {}
]);
bookStoreServices.service('bookStoreService_2', ['$scope',
function($scope) {}
]);
vi. Directive.js
var bookStoreDirectives = angular.module('bookStoreDirectives', []);
bookStoreDirectives.directive('bookStoreDirective_1', ['$scope',
function($scope) {}
]);
bookStoreDirectives.directive('bookStoreDirective_2', ['$scope',
function($scope) {}
]);
vii. Filters.js
var bookStoreFilters = angular.module('bookStoreFilters', []);
bookStoreFilters.filter('bookStoreFilter_1', ['$scope',
function($scope) {}
]);
bookStoreFilters.filter('bookStoreFilter_2', ['$scope',
function($scope) {}
]);viii. bookList.html
<ul>
<li ng-repeat="book in books">
书名:{{book.title}} 作者:{{book.author}}
</li>
</ul>ix. Hello.html
<p>{{greeting.text}},Angular</p>
<p><a href="#/list">下一页</a></p>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AngularJS 双向数据绑定详解简单实例
- angularjs学习笔记之双向数据绑定
- angularJS双向数据绑定
- 一入前端深似海，从此红尘是路人系列第九弹之如何实现一个双向数据绑定
- Angular 1.X中的数据双向绑定
- AngularJS 总结
- AngularJS中的基本概念介绍
- android MVVM 数据绑定初体验
- 3、AngularJs的双向数据绑定
- js发布订阅实现双向数据绑定
- 【AngularJs】Angular双向数据绑定
- 双向绑定底层剖析（用于自定义组件双向数据绑定和非form表单元素）
- 双向数据绑定原理(三种实现方式)
- JavaScript实现简单的双向数据绑定（Ember、Angular、Vue）
- 双向数据绑定
- Vue.js双向绑定的实现原理
- 为什么有Angular1.x、Angular2.x和Angular4.x，没听说Angular3.x？
- React原理的认识
- 【学习笔记】Vue中实现双向数据绑定的原理
- vue中的双向数据绑定的实现（数据劫持，结合发布者---订阅者模式）