Angular的apply和watch

最新推荐文章于 2018-08-02 09:16:32 发布

Z_BuzzLightyear

最新推荐文章于 2018-08-02 09:16:32 发布

阅读量269

点赞数

分类专栏： AngularJS 1.x版本学习文章标签： AngularJS apply watch

本文链接：https://blog.csdn.net/BuzzEQ/article/details/80895106

版权

AngularJS 1.x版本学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

作用域特点

简介

$scope对象，实质是一个作用域对象。作用域可以存储数据模型、为表达式表达式提供上下文环境和监听表达式的变化并且传播事件。主要是用来连接视图与控制器。

作用域特点

$watch

监听数据模型的变化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>推断注入</title>
    <script src="components/angular/angular.min.js"></script>
</head>

<body ng-app="a3_6">
    <div ng-controller="c3_6">
        <div>
            <input type="text" ng-model="name" placeholder="请输入姓名">
        </div>
        <div>
            {{count}}
        </div>
        <div>
            {{name}}
        </div>
    </div>
    <script>
        var a3_6 = angular.module('a3_6',[])
        .controller('c3_6',['$scope',function($scope){
            $scope.count = 0;
            $scope.name = '';

            $scope.$watch('name',function(){
                console.log($scope.name);
                $scope.count++;
            });
        }])
    </script>
</body>

</html>

$apply

为各种类型的数据模型提供支撑，将他们引入到ng可控制器的范围中。例如，通过页面时图模版中，‘ng-click’指令，执行控制器中的代码。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>RunJS</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

    <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
    <script src="serviceJS01.js"></script>
</head>

<body ng-app="myApp">
    <div ng-controller="firstController" ng-click="show()">
        {{name}} {{age}}
    </div>
</body>

</html>
<script>
    var app = angular.module("myApp", []);
    app.controller('firstController', function ($scope, $timeout) {
        setTimeout(function () {
            $scope.$apply(function () {
                $scope.name = "李四";
            })
        }, 2000);
        $scope.name = "张三";
        $scope.age = '10';
        $scope.show = function () {
            $scope.name = '点击后的name';
        }
        $timeout(function () {
            $scope.age = '50';
        }, 2000);
    })
</script>

记住最重要的就是AngularJS是否能够监测到你的更改。如果不能，那么，你就得必须人为调用$apply()

如果AngularJS总是将我们的代码放在$apply()中并且执行$digest循环，那么，什么时候需要我们人为的调用$apply呢？事实上，AngularJS已经很明确的告诉我们了。AngularJS只会关心在AngularJS的执行上下文中的发生的数据模型(model)的变化(比如，改变数据的代码在$apply()里面)。AngularJS内建的指令也会自动触发$digest循环所以任何数据模型(model)的改变都会反映到视图中。但是，如果我们更改一个不在AngularJS执行上下文中的数据模型(model)，就需要人为的调用$apply()来提醒AngularJS数据发生变化了。就像是要告诉AngularJS，我们改变了一些数据，他应该启用监听器以便于让我们所做的改变能够反映出来。

setTimeout，是一个回调，setTimeout是在angularjs中的，不过setTimeout里面的函数是回调就跳出了angularjs上下文。

很多时候不在上下文就是因为回调函数！

Z_BuzzLightyear

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular的apply和watch

作用域特点简介$scope对象，实质是一个作用域对象。作用域可以存储数据模型、为表达式表达式提供上下文环境和监听表达式的变化并且传播事件。主要是用来连接视图与控制器。作用域特点$watch监听数据模型的变化&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF...
复制链接

扫一扫

专栏目录