Note05--双向数据绑定

来源：互联网发布：淘宝网电动车编辑：程序博客网时间：2024/04/27 23:07

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.jsvar bookStoreDirectives = angular.module('bookStoreDirectives', []);bookStoreDirectives.directive('bookStoreDirective_1', ['$scope',    function($scope) {}]);bookStoreDirectives.directive('bookStoreDirective_2', ['$scope',    function($scope) {}]);vii. Filters.jsvar 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}}&nbsp;&nbsp;&nbsp;作者:{{book.author}}    </li></ul>

        ix. Hello.html

<p>{{greeting.text}},Angular</p><p><a href="#/list">下一页</a></p>

0 0