zoukankan      html  css  js  c++  java
  • angularjs的数据更新问题

    在angularjs里面,检查绑定的数据到底有没有发生变化,是数据绑定的基础,只要知道数据改变了,angularjs才会去更新视图,而angularjs提供了一个用的方法$scope.$apply();

    至于什么时候使用此方法呢?我先给出一个例子:

    <!DOCTYPE html>
    <html lang="zh-cn" ng-app="myWeb">
    <head>
        <meta charset="utf-8">
        <title>视图更新</title>
        <link rel="stylesheet" href="./libs/bootstrap.min.css">
        <script src="./libs/angular.min.js"></script>
    </head>
    <body ng-controller="shou">
    
    <div ng-bind="name"></div>
    <script>
        var app = angular.module('myWeb', []);
        app.controller('shou', ['$scope', function($scope) {
            $scope.name = '我是张三';
            setTimeout(function(){
                $scope.name = '我是李四';
            }, 1000);
        }]);
    </script>
    </body>
    </html>

    试一下这段代码发现页面再出现‘我是张三’, 后不会变为‘我是李四’,  这是不符合我们想要的呀,所以这个时候$scope.$apply()就可以登场了

    代码如下:

    <!DOCTYPE html>
    <html lang="zh-cn" ng-app="myWeb">
    <head>
        <meta charset="utf-8">
        <title>视图更新</title>
        <link rel="stylesheet" href="./libs/bootstrap.min.css">
        <script src="./libs/angular.min.js"></script>
    </head>
    <body ng-controller="shou">
    
    <div ng-bind="name"></div>
    <script>
        var app = angular.module('myWeb', []);
        app.controller('shou', ['$scope', function($scope) {
            $scope.name = '我是张三';
            setTimeout(function(){
                $scope.$apply(function(){
                    $scope.name = '我是李四';
                });
            }, 1000);
        }]);
    </script>
    </body>
    </html>

    上面的代码的效果是在出现了‘我是张三’,后1秒就会变为‘我是李四’,这正是我们想要的效果,理想状态。

    我的片面理解就是$scope.$apply()会通知angularjs数据改变了,快去更新视图。

    同时还有一个方法也可以实现如上的效果:那就是$timeout, 代码如下:

    <!DOCTYPE html>
    <html lang="zh-cn" ng-app="myWeb">
    <head>
        <meta charset="utf-8">
        <title>视图更新</title>
        <link rel="stylesheet" href="./libs/bootstrap.min.css">
        <script src="./libs/angular.min.js"></script>
    </head>
    <body ng-controller="shou">
    
    <div ng-bind="name"></div>
    <script>
        var app = angular.module('myWeb', []);
        app.controller('shou', ['$scope', '$timeout', function($scope, $timeout) {
            $scope.name = '我是张三';
            $timeout(function(){
                $scope.name = '我是李四';
            }, 1000);
        }]);
    </script>
    </body>
    </html>

    为什么$timeout也可以呢?  这个时候我就在想这可能和angualrjs视图渲染的方式和js的事件轮询有关了,这个地方就留给好奇的大兄弟去深究了....

  • 相关阅读:
    Unity3D系列教程--使用免费工具在Unity3D中开发2D游戏 第一节
    第十三周项目2:形状类族中的纯虚函数
    js中的null和undefined
    javaScript Windows相关
    Array和ArrayList的异同点
    汉语-词语-人才:T型人才
    图书-计算机-软件编程:《程序员的自我需要》
    智力-智力测试-门萨:百科
    智力开发-早教:七田真
    经济-AMA:百科
  • 原文地址:https://www.cnblogs.com/tqt--0812/p/6971600.html
Copyright © 2011-2022 走看看