angularjs 删除作用域时清除$watch

最新推荐文章于 2024-03-07 19:07:08 发布

jimb55

最新推荐文章于 2024-03-07 19:07:08 发布

阅读量3.1k

点赞数

分类专栏： angularjs 前端文章标签： javascript angularjs 前端

本文链接：https://blog.csdn.net/jian1jian_/article/details/71211337

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

angularjs

1 篇文章 0 订阅

订阅专栏

先看下面一段代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

    <div id="content">
        <span-c insert="name"></span-c>
    </div>
    <button ng-click="del()">删除内容</button>
    <button ng-click="info()">查看作用域</button>
    输入内容: <input ng-model="name">
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope, $compile) {
        $scope.name = "John Doe";

        $scope.$watch("xxx",function(){
            console.log("xxx");
        });

        $scope.del = function () {
            document.getElementById("content").innerHTML = "";
        }
        $scope.info = function () {
//            $scope.$$watchers = [];
            console.log($scope.$$watchers);
        }
    });


    app.directive("spanC", spanC);
    // 指令
    function spanC() {
        return {
            restrict: "AE",
            template: '',
            scope:{
                insert:"="
            },
            link: function (scope, element, attrs) {
                scope.$watch("insert",function(n){
                    console.log("asd");
                    element[0].innerHTML = n;
                });
            }
        }
    }
</script>

</body>
</html>

这上面可以看到当我删除指令内容时，改变输入框内容时仍然会输出asd ，就是监听没有去除。

原因是指令上的 $watch 绑定的 scope 是控制器上的$scope,即时指令删除它也不会消失。

但$scope.$watch() 返回一个函数，调用此函数会取消监听

var unwatch = scope.$watch("insert",function(n){
          console.log("asd");
          element[0].innerHTML = n;
     });
  unwatch();

上面这里监听一新建就取消了

回到一开始的代码：可以结合广播来直接清除指令依赖起的监听

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

    <div id="content">
        <span-c insert="name"></span-c>
    </div>
    <button ng-click="del()">删除内容</button>
    <button ng-click="info()">查看作用域</button>
    输入内容: <input ng-model="name">
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope, $compile) {

        $scope.name = "John Doe";

        $scope.$watch("xxx",function(){
            console.log("xxx");
        });

        $scope.del = function () {
            document.getElementById("content").remove();
            $scope.$broadcast('destroySpan');
        }
        $scope.info = function () {
//            $scope.$$watchers = [];
            console.log($scope);
        }
    });


    app.directive("spanC", spanC);
    // 指令
    function spanC() {
        return {
            restrict: "AE",
            template: '',
            scope:{
                insert:"="
            },
            link: function (scope, element, attrs) {
                var clear = scope.$watch("insert",function(n){
                    console.log("asd");
                    element[0].innerHTML = n;
                });
                scope.$on('destroySpan', function() {
                    console.log("asdasd");
                    clear();
                });
            }
        }
    }
</script>

</body>
</html>

这里面的指令监听destroySpan事件，可以自定义一个名，在删掉对应 DOM 时可以广博对应的事件来删除指令依赖的 $watch