angularjs控制层间的通信与$watch

最新推荐文章于 2020-08-15 23:32:55 发布

吃瓜要吐字

最新推荐文章于 2020-08-15 23:32:55 发布

阅读量218

点赞数

文章标签： $watch controller angularjs

本文链接：https://blog.csdn.net/Zry180033/article/details/81189173

版权

来到汉得公司的第二周过去了，就在上周做了一个移动端的记账demo，前端技术为angularjs，因为demo中涉及到数据间的交互，学习了controller层间的通信，在CSDN和博客园上看了两篇文章，得到了很深的体会，现在为之前的学习做个总结。

原文链接------angularJS中的$watch方法监听作用域:https://www.jianshu.com/p/3398f1d19320

angular controller之间通信方式： https://www.cnblogs.com/freefish12/p/5761164.html

本篇博客是关于$watch方法监听父级controller，若是更多的了解$watch与父子级controller之间通信，请看以上两篇文章。

为了便于理解，写了一个demo，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="parent">
    {{name}}
    <button ng-click="change()"></button>
    <div ng-controller="child">
        {{password}}
    </div>
</div>
<script>
    var app=angular.module('myApp',[]);
    app.controller('parent',function ($rootScope,$scope) {
        /*$scope.password='123456789'*/
        $scope.name='小王';
        $scope.password='小明';
        $scope.change=function(){
            $scope.name+=1;
        }
    });
    app.controller('child',function($scope){
        $scope.$parent.$watch('name',function (newvalue,oldvalue) {
            console.log(newvalue);
            console.log(oldvalue);
        },true)
    })
</script>
</body>
</html>