Angularjs 从 DOM 中删除自定义指令和子指令

Question

我有一个单页 angularjs 应用程序。我使用 $routeProvider 加载下面代码中显示的自定义指令。

现在加载的每个自定义指令都由附加的子自定义指令组成。所有自定义指令都有独立的范围。

我需要的是当 View 更改时要销毁的范围以及从当前 View 下的 DOM 中删除指令。我已经得到了以下代码。这可以仅使用 Jquery lite 和/或 angularjs 来实现吗？如果是这样，我如何从 DOM 中删除特定 View 的父指令和子指令？提前致谢。

自定义指令表格

 angular.module("form", [])
    .directive("form",['$http','$rootScope','$location', function($http,$rootScope,$location){

return{
            link: function(scope,element,attrs){ 
               //functions go heere

                //destroy scope and remove from DOM on route change
                $rootScope.$on( "$routeChangeSuccess", function(event, next, current) {
                  if($location.path()!=='/form'){
                        scope.$destroy();
                        console.log('This should not be displayed on route change');
                    }   
                });



                //function and scopes go here
            },//return
            restrict:"A", 
            replace:true,
            templateUrl:"partials/form/form.html",//template
            transclude:true, //incorporate additional data within
            scope:{}
        }//return

}])

ng-view/routeProvider

app.config(['$routeProvider',function($routeProvider) {
        //configure the routes
        $routeProvider

        .when('/',{
        // route for the home page
            templateUrl:'partials/login/login.html',
            controller:'loginCtrl'      
        })

        .when('/home',{
        // route for the home page

            templateUrl:'partials/home/home.html',
            template:'<div home></div>'         
        })

        .when('/company',{
        // route for the sites& companies
            template:'<div company></div>'      
        })

        .when('/form',{
        // route for form
            template:'<div form></div>' 
        })

        .otherwise({
            //when all else fails
            templateUrl:'partials/login/login.html',
            controller:'loginCtrl'
        });

}]);

Answer 1

请参阅此引用:
How to manually take an Angular directive out of the DOM

根据来源引用:

步骤:
1.删​​除指令的作用域
2.删除指令的DOM

childScope.$destroy();  //IF THE DIRECTIVE WAS CREATED DYNAMICALLY OR ELSE WE MAY USE angular.element(DIRECTIVES-DOM).scope().$destroy()
$('.my-directive-placeholder').empty(); //DELETE DIRECTIVE'S DOM