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');
        });
    }
  };
});

这是plunker

编辑：这是我正在使用的更准确的图片：new plunker

Answer 1

范围破坏未自动连接到DOM - 因此，如果您想手动删除指令，IMO正确的方法是调用$ destroy（）然后显式删除任何相关的dom。

所以我会将元素的移除移动到$ destroy回调并用你已经拥有的代码触发它

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

并在您的指令中

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

HTH

Answer 2

我不太确定你真正关心的是实际的破坏事件本身，而是应用程序知道表单何时存在的方式。

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

我认为存在的问题是dom操作不应该存在......通过使用适当的范围模型和设计视图完全由范围模型驱动，角度应该几乎完成所有dom操作，如果不是全部的话。

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

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删除时，FormCtrl范围都会被销毁并触发$destroy事件。然而，观察确定形式存在的范围变量可能就是你真正想要的

DEMO

从DOM

2 个答案: