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

Question

我有一个添加到表单的指令，我需要知道何时从DOM中删除表单。 我试图通过$ destroy事件检测到它，但是当我在元素上调用.remove（）时，不会触发$ destroy事件。

我做错了吗？ 是否有正确的方法来告诉您何时将其从DOM中删除？

相关代码：

HTML：

<form id="myform" form-watch>

在控制器中：

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

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

指令：

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

这是一个小矮人

编辑：这是我正在使用的更准确的图片：新的朋克

Answer 1

作用域销毁不会自动连接到DOM-因此，如果要手动删除指令，IMO正确的方法是调用$ destroy（），然后显式删除任何相关的dom。

因此，我将元素的移除移动到$ destroy回调中，并使用您已有的代码触发它

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

并在您的指令中

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

高温超导

Answer 2

我不太确定您真正关心的是实际的destroy事件本身，而是应用程序中一种了解表单是否存在的方式。

这应该通过应用程序中的控制器和服务进行监控。

我认为的问题是，不应进行dom操作...通过使用适当的范围模型并设计视图以仅由范围模型驱动，角度应几乎完成所有dom操作，即使不是全部它的。

以下示例通过将表单包装在其自己的控制器中并使用ng-if和一个scope变量确定表单是否存在来实现所需的警报：

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

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

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>

每当ng-if删除表单时ng-if FormCtrl范围被破坏并且$destroy事件被触发。 但是，观看确定表单存在的范围变量可能是您真正追求的目标

演示

从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