javascript - angularjs 怎樣移除指令監聽？
問題描述
angular移除指令內容后，它的監聽還在控制器的 $scope 上，要怎樣移除呢？代碼如下：
<!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><p ng-app='myApp' ng-controller='myCtrl'> <p id='content'><span-c insert='name'></span-c> </p> <button ng-click='del()'>刪除內容</button> <button ng-click='info()'>查看作用域</button> 輸入內容: <input ng-model='name'></p><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>
如果我直接
$scope.$$watchers = [];
把控制器上的
$scope.$watch('xxx',function(){ console.log('xxx');});
也移除了，怎樣才能移除指令時連同它的監聽也去掉呢？
問題解答
回答1：調用 $scope.$watch() 或 $scope.$on() 方法后，都會返回一個函數引用，用于移除監聽。了解詳細信息，可以查看 Angular $rootScope 官方文檔。另外若想了解 $broadcast、$on、$emit 使用方法，可以參考 - angularjs的事件 $broadcast and $emit and $on 這篇文章。
$scope.del = function () { document.getElementById('content').innerHTML = ''; $scope.$broadcast(’destroySpan’);};// spanC 指令link函數link: function (scope, element, attrs) { var unwatch = scope.$watch('insert',function(n){ console.log('asd'); element[0].innerHTML = n; }); scope.$on(’destroySpan’, function() { unwatch(); });}回答2：
指令：
var clear = scope.$watch('insert',function(n){ console.log('asd'); element[0].innerHTML = n;});$scope.$on(’$destroy’, function() { clear();});
相關文章：
1. javascript - 原生canvas中如何獲取到觸摸事件的canvas內坐標?2. sql語句 - mysql中關聯表查詢問題3. javascript - iframe 為什么加載網頁的時候滾動條這樣顯示？4. javascript - vscode alt+shift+f 格式化js代碼，通不過eslint的代碼風格檢查怎么辦。。。5. javascript - [js]為什么畫布里不出現圖片呢？在線等6. javascript - 有什么比較好的網頁版shell前端組件？7. javascript - 求解答：實例對象調用constructor，此時constructor內的this的指向？8. javascript - 如何將一個div始終固定在某個位置；無論屏幕和分辨率怎么變化；div位置始終不變9. css - chrome下a標簽嵌套img 顯示會多個小箭頭?10. html - vue項目中用到了elementUI問題
網公網安備