这上面可以看到当我删除 指令内容时，改变输入框内容时仍然会输出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
