$ destroy не вызывается при удалении элемента из DOM

0

У меня есть директива, добавленная к формам, и мне нужно знать, когда форма удалена из 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');
        });
    }
  };
});

Здесь плункер

EDIT: Здесь гораздо более точная картина того, с чем я работаю: новый плункер

  • 1
    Необходимо понимать, что область действия является областью контроллера в этом случае, так как директива не использует изолированную область. Контроллер все еще активен, поэтому удаление элемента не приведет к разрушению области видимости контроллера. Кроме того, почему бы не использовать ng-if вместо манипулирования DOM? В контроллере никогда не должно быть никакого кода манипулирования dom. Что именно вы хотите сделать?
  • 0
    Отметил. По сути, в приложении есть компоненты, на которые можно кликать, и щелчок по одному заменяет экран только для чтения со значением (в форме) для отправки изменений. Я использую эту директиву form-watch для отслеживания состояния "редактирования" на всей странице. Если что-то вызывает удаление формы, мне нужно знать, что я больше не редактирую.
Показать ещё 3 комментария
Теги:
dom

2 ответа

1
Лучший ответ

Я не уверен, что на самом деле вас беспокоит фактическое событие 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 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

Поделиться
  • 0
    Выше вы упомянули, что директива тоже будет работать, но для меня это не так. Вот гораздо более точная картина того, с чем я работаю: plnkr.co/edit/UvhZbflqKJY2YcCWnR6U
  • 0
    Кроме того, стоит отметить, что в приложении есть МНОЖЕСТВО различных директив «click-to-edit», поэтому я стараюсь сделать это как можно проще, просто опустив на них директиву form-watch.
Показать ещё 4 комментария
1

Уничтожение области не связано с DOM автоматически - поэтому, если вы хотите удалить директиву вручную, IMO правильным способом является вызов $ destroy(), а затем удалить любое связанное ядро явно.

Поэтому я бы переместил удаление элемента в обратный вызов $ destroy и запускал его с кодом, который у вас уже есть

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

и в вашей директиве

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

НТН

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню