在刪除AngularJS中的DOM元素之前我應該​​做些什麼？

Question

我記得在將元素從DOM中刪除之前需要銷燬元素上的範圍。但我不確定這是如何完成的。

所以，恰好我有一個從DOM中刪除元素的指令。一個精簡版會是什麼樣子：

(function() { 
    angular.module('app').directive('remove', function() { 
     return { 
      restrict: 'A', 
      link: function(scope, element, attrs) { 
       element.children().remove(); 
       element.remove(); 
      } 
     } 
    }]); 
}()); 

一個簡單的和不切實際的例子是像 <my-directive-with-isolated-scope remove></my-directive-with-isolated-scope>

我可以刪除元素，但它似乎並不像範圍被破壞，這是我相信會造成內存泄漏嗎？我還在指令的控制器（具有隔離範圍的控制器）中設置了$interval，在那裏我設置了一個控制檯消息作爲測試出去。我可以看到，當它從DOM中刪除時，它仍然以設定的時間間隔輸出控制檯消息。

我會修改上述指令中的某些內容，以正確刪除元素嗎？

Answer 1

如果元素是從範圍生成的，您應該銷燬它，刪除範圍數據並讓角度重新呈現它，而不是使用DOM操作。範圍數據與DOM元素本身無關，該元素正是基於範圍呈現的內容。因此移除元素不會對範圍變量產生任何影響。

你不應該使用指令來做到這一點;相反，請更改或從範圍中刪除值。

Answer 2

一對夫婦的實驗，爲您與元/範圍破壞嘗試：

你可以做一個測試，看看當範圍被破壞這樣的：

scope.$on('$destroy', function(){ 
    console.log('Scope Destroyed!'); 
}); 

您還可以測試元素爲破壞：

element.on('$destroy', function(){ 
    console.log('Element Destroyed!'); 
}); 

（請參閱活動的angular.element docs節）現在

，大約間隔：

的$interval將運行，直到你$interval.cancel()它的範圍是否存在（除非回調是一些功能勢必scope在這種情況下，回調可能會變成不確定的，我不確定$interval如何處理）。

如果你的指令運行$interval功能，你可能會碰到這樣的：

var count = 0; 
var timer = 
    $interval(function doingStuff() { 
     console.log(count + ' seconds ...'); 
    }, 1000); 

scope.$on('$destroy', function cleanup() { 
    $interval.cancel(timer); 
}); 

關於需要手動破壞範圍：

如果手動創建範圍通過var myScope = $scope.$new();這是你的責任通過myScope.$destroy();銷燬它。我會說這是一個更高級的用法，我想不出任何真正常見的原因來手動創建一個新的作用域。（也許，如果你的指令是一個全新的作用域創建一個元素和$compile吧）

Answer 3

指令，如ng-view，ng-if，ng-repeat，ng-include等的元素添加到DOM，首先創建一個子範圍，在將它們附加到DOM之前，使用$compile服務來將這些元素編譯並鏈接到該子範圍。這些編譯的元素鏈接到創建的子範圍。當這些指令隨後刪除這些元素時，它們也會破壞子範圍。

創建一個子範圍：

var childScope = scope.$new(); 

摧毀孩子範圍：

childScope.$destroy(); 

欲瞭解更多信息，請參閱AngularJS rootScope.scope API Reference。