angular（双向数据绑定&$digest()方法）

最新推荐文章于 2023-07-28 01:25:30 发布

世间百态不过尔尔

最新推荐文章于 2023-07-28 01:25:30 发布

阅读量253

点赞数

分类专栏： angularjs 文章标签： angular（双向数据绑定&$digest()方法）

本文链接：https://blog.csdn.net/weixin_44706842/article/details/88585584

版权

angularjs 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <input type="text" id="t1" oninput="fun(this)">
    <div id="d1"></div>
    <script>
        var str = "abc";
        var text = document.getElementById('t1');
        var div = document.getElementById("d1");
        text.value = str;
        div.textContent = str;
        function fun(t){
            console.log(t.value);
            str = t.value;
            div.textContent = t.value;
        }
    </script>
</body>
</html>

1、 $d i g e s t () 方法该方法也可以用于触发脏检查，但是会检查所有的变量，会比较消耗性能，不建议使用，建议使用$ apply

2、$watch()方法
$a p p l y 执行后，当观察的变量发生改变后，会触发$ watch()方法，可以在该方法中得到新值依旧旧值
语法：
$watch(监听的对象,调用的函数,是否深度检测);
-监听的对象：可以是一个对象，也可以是一个表达式、变量或函数
-调用函数：监听的对象发生改变时所触发的函数，可以接收三个参数：newValue(新值)、oldValue(旧值)、scope(作用域的引用)
-是否深度检测：如果设置为true，他会检查对象中的每一个属性，如果希望监听数组的个别元素或对象的某个属性，建议设置为true

-$watch的性能问题
当我们使用$watch观察一个对象时，会申请内存，当我们不再使用时，需要将其释放掉；在我们调用$watch时，会返回一个观察对象，该对象就是一个用于释放$watch的监听函数

3、事件指令
事件指令也会触发脏检查
-ng-click
单击事件
-ng-dblclick
-ng-mouseup
-ng-mouseover
-ng-mousemove

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="controller">
    <div ng-bind = "name"></div>
    <input type="text" ng-model="name">
    <input type="text" ng-model="obj.age">
    <input type="button" ng-click="fun()" value="按钮">
    <script>
        var app = angular.module("app",[]);
        app.controller("controller",function($scope){
            $scope.name = "李四";
            $scope.$watch("name",function(newValue,oldValue,scope){
                console.log("新值："+newValue);
                console.log("旧值："+oldValue);
            })

            $scope.obj = {
                name:"王五",
                age:20,
                sex:"男"
            }

            //使用深度检查，去检测对象属性的改变，第三个参数设置为true
            $scope.$watch("obj",function(newValue,oldValue){
                console.log("年龄新值："+newValue);
                console.log("年龄旧值："+oldValue);
            },true);

            //释放$watch
            $scope.str = "123";
            var watch = $scope.$watch("str",function(){

            });
            //上面的watch实际上就是用于释放$watch的函数
            watch();//这句代码，意思是调用释放函数，将$watch销毁

            $scope.fun = function(){
                $scope.name = "二ee";
            }
        })
    </script>
</body>
</html>

世间百态不过尔尔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular（双向数据绑定&$digest()方法）

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;input type="text" id="t1" oninput="fun(this)"&g
复制链接

扫一扫

专栏目录