销毁范围销毁指令/子范围 [英] destroy directive/child scope on scope destroy

问题描述

我有一个指令，编译另一个指令并将其附加到通过相同范围的机构。这不会与父母指令的位置相同。

当父指令被破坏时，是否有某种方法让子指令和范围也被破坏？我问，因为在检查DOM后，子指令仍然存在。

目前，我钩入父母$ destroy事件，但很好奇它是否可以自动处理。

jsFiddle： http： //jsfiddle.net/FPx4G/1/

孩子在切换父母时停留在那里，但我希望被销毁。什么是最好的方法来做到这一点？

html：

 < div ng-app =app> 
< div ng-controller =ParentCtrl> 
< button data-ng-click =toggleParent（）>切换父< /按钮> 
< div data-ng-switch data-on =displayDirective> 
< div data-ng-switch-when =true> 
< div class =parentDirective>父指令< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  

javascript：

  angular.module（'app'，[]）
 .directive（parentDirective，function（$ compile）{
 return {
限制：'C'，
 link：function（scope，element）{
 var secondDirective = angular.element（document.createElement（div））; 
 secondDirective.addClass（childDirective ）; 
 
 document.body.appendChild（secondDirective [0]）; 
 
 $ compile（secondDirective）（scope）; 
} 
} 
。）
 .directive（childDirective，function（）{
 return {
 restrict：'C'，
 template：'< div> Child Directive< ; / $&$;'$，
 link：function（scope，element）{
 scope。$ on（destroy，function（）{
 alert（1）; 
} ）; 
} 
} 
}）; 
 
 
函数ParentCtrl（$ scope）{
 $ scope.displayDirective = true; 
 $ scope.toggleParent = function（）{
 $ scope.displayDirective =！$ scope.displayDirective; 
} 
} 
  

通常情况下，我只需要子元素原指令的模板，以便它的位置正确。这个问题真的归结为处理z-索引。父元素位于可以滚动的容器中，因此如果子容器大于容器，子元素（在一种情况下是自定义下拉列表）将被隐藏/切断。为了解决这个问题，我在文档主体中创建了实际的子元素，并将其与父元素相对放置。它也会监听滚动事件来重新定位自己。我有这一切工作，并没有问题。这是什么时候我需要删除父母......孩子仍然存在。

解决方案

  return {
 restrict：'C'，
 template：'< div> Child Directive< / div>'，
 link：function（scope，element）{
 scope。$ on（$ destroy，function（）{
 element.remove（）; 
}）; 
} 
} 
}）; 
  

更新小提琴： http://jsfiddle.net/C8hs6/

I have a directive that compiles another directive and attaches it to the body with the same scope passed. This will not be the same location as the "parent" directive.

When the parent directive gets destroyed is there some way to have the child directive and scope destroy as well? I ask because after inspecting the DOM the child directive is still there.

Currently I hook into the parents $destroy event but was curious if it could be handled automatically.

jsFiddle: http://jsfiddle.net/FPx4G/1/

The child stays there as you toggle the parent, but i'd like to to be destroyed. What would be the best method to do that?

html:

<div ng-app="app">
    <div ng-controller="ParentCtrl">
        <button data-ng-click="toggleParent()">Toggle Parent</button>
        <div data-ng-switch data-on="displayDirective">
            <div data-ng-switch-when="true">
                <div class="parentDirective">Parent Directive</div>
            </div>
        </div>
    </div>
</div>

javascript:

angular.module('app', [])
    .directive("parentDirective", function($compile){
        return {
            restrict: 'C',
            link: function(scope, element){
                var secondDirective = angular.element(document.createElement("div"));
                secondDirective.addClass("childDirective");

                document.body.appendChild(secondDirective[0]);

                $compile(secondDirective)(scope);
            }
        }
    })
    .directive("childDirective", function(){
        return {
            restrict: 'C',
            template: '<div>Child Directive</div>',
            link: function(scope, element){
                scope.$on("destroy", function(){
                   alert(1); 
                });
            }
        }
    });


function ParentCtrl($scope){
   $scope.displayDirective = true;
    $scope.toggleParent = function(){
        $scope.displayDirective = !$scope.displayDirective;
    }
}

Normally, I'd just have the sub element within the original directive's template so that it's positioned correctly. The issue really comes down to dealing with z-index. The parent element is in a container that can be scrolled, so the child (in one case a custom dropdown) would be hidden/cut off if it was larger then the container. To combat this I instead create the actual child in the document body and position it relative to the parent. It would also listen in on scroll events to reposition itself. I have that all working and is just fine. It's what happens when I need to delete the parent... the child is still there.

解决方案

directive("childDirective", function(){
    return {
        restrict: 'C',              
        template: '<div >Child Directive</div>',                
        link: function(scope, element){                  
            scope.$on("$destroy",function() {
                element.remove();
            }); 
        }
    }
});

updated fiddle : http://jsfiddle.net/C8hs6/

这篇关于销毁范围销毁指令/子范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！