Fatal编程技术网
  • javascript/
  • Javascript 从DOM中删除元素时未调用$destroy

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

javascript angularjs dom

Javascript 从DOM中删除元素时未调用$destroy,javascript,angularjs,dom,Javascript,Angularjs,Dom,我有一个添加到表单的指令，我需要知道表单何时从DOM中删除。我试图用$destroy事件检测它，但是当我对元素调用.remove（）时，$destroy事件不会被触发 我做错了吗？是否有一种正确的方法来判断它何时从DOM中删除 相关代码： HTML： <form id="myform" form-watch> 该指令： app.directive('formWatch', function () { return { restrict: 'A', link: f

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

我做错了吗？是否有一种正确的方法来判断它何时从DOM中删除

相关代码：

HTML：

<form id="myform" form-watch>
该指令：

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

编辑：这里有一个关于我正在使用的内容的更准确的图片：

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

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

angular.element(form).scope().$destroy();
在你的指令中

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

我不确定您真正关心的是实际的销毁事件本身，而是在应用程序中了解表单何时存在或不存在的一种方式

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

我认为问题是有dom操作正在进行，而这不应该存在。。。通过使用适当的范围模型并设计仅由范围模型驱动的视图，angular应该完成几乎所有的dom操作（如果不是全部的话）

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

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

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


切换形式
每当
ng if
删除表单时，FormCtrl作用域将被销毁，并触发
$destroy
事件。然而，观察决定表单存在的范围变量很可能是您真正想要的

需要认识到，在这个实例中，作用域是控制器作用域，因为指令没有使用隔离的作用域。控制器仍处于活动状态，因此删除元素不会破坏控制器作用域。还有，为什么不使用
ng if
而不是操作DOM呢？控制器中不应该有任何dom操作代码。你到底想做什么？注意到。从本质上说，该应用程序到处都有可单击的组件，单击一个组件将用一个值（以表单形式）替换只读显示，以提交更改。我使用这个formwatch指令来跟踪页面范围内的“编辑”状态。如果有什么原因导致表单被删除，我需要知道我不再编辑了，更需要使用scope模型或$state来控制dom元素的存在。如果你自己在做这种dom操作，这是我辩护中的一个大错误，是其他人的错误。你们能通过使用作用域模型来扩展你们的意思吗？简单的例子…表单在自己的控制器中，但也可以是指令，用独立的作用域来做同样的事情，或者你们提到的嵌套视图，指令也可以工作，但它似乎不适合我。这里有一个更准确的图片，我正在使用的是：另外，值得注意的是，应用程序中有很多不同的“点击编辑”指令，这就是为什么我试图通过在它们上删除form watch指令来尽可能简单。好的……没有DOM操作的情况下也是一样的。。。如果在同一个
i编辑
变量代码上简单地添加
ng，实际上会更简单，并实现您希望它做的事情…抛出警报签出
x-editable
。。。伟大的点击编辑与角度模块也密切合作，谢谢。我是否有权访问指令控制器中的元素（表单）？还是表单控制器？使用此解决方案，我如何处理监视窗体的$dirty属性？

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

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



<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>