从DOM中删除元素时未调用$ destroy

Question

I have a directive that's added to forms, and I need to know when a form is removed from the DOM. 我有一个添加到表单的指令，我需要知道何时从DOM中删除表单。 I'm trying to detect it with the $destroy event, but when I call .remove() on an element the $destroy event is not triggered. 我试图通过$ destroy事件检测到它，但是当我在元素上调用.remove（）时，不会触发$ destroy事件。

Am I doing this wrong? 我做错了吗？ Is there a correct way to tell when it's removed from the DOM? 是否有正确的方法来告诉您何时将其从DOM中删除？

Relevant code: 相关代码：

The HTML: HTML：

<form id="myform" form-watch>

In the controller: 在控制器中：

var form = document.getElementById('myform');
// DOES NOT trigger $destroy
form.remove();

// DOES trigger $destroy
//angular.element(form).scope().$destroy();

The directive: 指令：

app.directive('formWatch', function () {
  return {
    restrict: 'A',
    link: function(scope, element) {
        scope.$on('$destroy', function() {
            alert('destroyed');
        });
    }
  };
});

Here's a plunker 这是一个小矮人

EDIT: Here's a much more accurate picture of what I'm working with: new plunker 编辑：这是我正在使用的更准确的图片：新的朋克

Answer 1

The scope destruction is not connected to the DOM automatically - so if you want to remove a directive manually, IMO the correct way is to call $destroy() and then remove any related dom explicitly. 作用域销毁不会自动连接到DOM-因此，如果要手动删除指令，IMO正确的方法是调用$ destroy（），然后显式删除任何相关的dom。

So I would move the element's removal to the $destroy callback and trigger it with the code you already have 因此，我将元素的移除移动到$ destroy回调中，并使用您已有的代码触发它

angular.element(form).scope().$destroy();

and in your directive 并在您的指令中

scope.$on('$destroy', function() {
    element.remove();
});

HTH 高温超导

Answer 2

I'm not so sure that what you are really concerned with is the actual destroy event itself, but rather a way in the app to know when the form exists or not. 我不太确定您真正关心的是实际的destroy事件本身，而是应用程序中一种了解表单是否存在的方式。

This should be monitored through the controllers and services in the app. 这应该通过应用程序中的控制器和服务进行监控。

The issue I think is that there is dom manipulation going on that shouldn't be there ... By using proper scope models and designing views to be solely driven by scope models angular should be doing almost all of the dom manipulation , if not all of it. 我认为的问题是，不应进行dom操作...通过使用适当的范围模型并设计视图以仅由范围模型驱动，角度应几乎完成所有dom操作，即使不是全部它的。

Following example acheives the alert you want by wrapping form in it's own controller and using ng-if and a scope variable to determine whether form exists or not: 以下示例通过将表单包装在其自己的控制器中并使用ng-if和一个scope变量确定表单是否存在来实现所需的警报：

app.controller('MainCtrl', function($scope) {
  $scope.showForm = true;
});

app.controller('FormCtrl', function($scope) {
  $scope.$on('$destroy', function() {
    alert('destroyed');
  });
});

HTML: HTML：

<body ng-controller="MainCtrl">
  <!-- form has it's own controller -->
  <form ng-if="showForm" ng-controller="FormCtrl"></form>

 <!-- button in MainCtrl scope -->
 <button ng-click="showForm = !showForm">Toggle form</button>

Whenever form is removed by ng-if the FormCtrl scope is destroyed and the $destroy event is triggered. 每当ng-if删除表单时ng-if FormCtrl范围被破坏并且$destroy事件被触发。 However watching the scope variable that determines form existence is likely what you are really after 但是，观看确定表单存在的范围变量可能是您真正追求的目标

DEMO 演示

从DOM中删除元素时未调用$ destroy

问题描述

2 个解决方案

解决方案1
1 2015-07-22 14:11:13

解决方案2
1 已采纳 2015-07-22 14:44:36

从DOM中删除元素时未调用$ destroy

问题描述

2 个解决方案

解决方案1 1 2015-07-22 14:11:13

解决方案2 1 已采纳 2015-07-22 14:44:36

解决方案1
1 2015-07-22 14:11:13

解决方案2
1 已采纳 2015-07-22 14:44:36