javascript - $destroy is not being called when element is removed from DOM -
i have directive that's added forms, , need know when form removed dom. i'm trying detect $destroy event, when call .remove() on element $destroy event not triggered.
am doing wrong? there correct way tell when it's removed dom?
relevant code:
the html:
<form id="myform" form-watch> in controller:
var form = document.getelementbyid('myform'); // not trigger $destroy form.remove(); // 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 plunker
edit: here's more accurate picture of i'm working with: new plunker
i'm not sure concerned actual destroy event itself, rather way in app know when form exists or not.
this should monitored through controllers , services in app.
the issue think there dom manipulation going on shouldn't there ... using proper scope models , designing views solely driven scope models angular should doing of dom manipulation , if not of it.
following example acheives alert want wrapping form in it's own controller , using ng-if , scope variable determine whether form exists or not:
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> whenever form removed ng-if formctrl scope destroyed , $destroy event triggered. watching scope variable determines form existence after
Comments
Post a Comment