Question

在angularJS中，我希望在范围被破坏时做一些事情，当我在线搜索时，我来到了这个页面：http://www.bennadel.com/blog/2548-Don-t-Forget-To-Cancel-timeout-Timers-In-Your-destroy-Events-In-AngularJS.htm?&_=0.5475860409906698#comments_44655

我对代码做了一点改动，如下所示，但$ destroy似乎没有被解雇。关闭浏览器选项卡或转到另一个URL后，我在控制台窗口中看不到任何内容。

有人可以帮忙吗？

提前致谢。

<!DOCTYPE html>
<html class="ng-scope" ng-app="Demo" ng-controller="DemoController"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">

    <title>
        Don't Forget To Cancel $timeout Timers In Your $destroy Events In AngularJS
    </title>
<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak{display:none;}ng\:form{display:block;}</style></head>
<body>

    <h1>
        Don't Forget To Cancel $timeout Timers In Your $destroy Events In AngularJS
    </h1>

    <p>
        <a href="#" ng-click="toggle()">Toggle Section</a>
    </p>

    <div ng-switch="section">

        <!-- ngSwitchWhen: happy -->

        <!-- ngSwitchWhen: sad -->

    <p class="ng-scope" ng-switch-when="happy" bn-directive="">
            Oh sweet!
        </p></div>


    <!-- Load jQuery and AngularJS. -->
    <script type="text/javascript" src="http://bennadel.github.io/JavaScript-Demos/vendor/jquery/jquery-2.0.3.min.js">
    </script>
    <script type="text/javascript" src="http://bennadel.github.io/JavaScript-Demos/vendor/angularjs/angular-1.0.7.min.js">
    </script>
    <script type="text/javascript">


        // Create an application module for our demo.
        var app = angular.module( "Demo", [] );


        // -------------------------------------------------- //
        // -------------------------------------------------- //


        // I control the main demo.
        app.controller(
            "DemoController",
            function( $scope ) {

                $scope.section = "happy";

                // I toggle the section value, to show/hide the
                // differnet sections in the markup.
                $scope.toggle = function() {

                    if ( $scope.section === "happy" ) {

                        $scope.section = "sad";

                    } else {

                        $scope.section = "happy";

                    }

                };

            }
        );


        // -------------------------------------------------- //
        // -------------------------------------------------- //


        // I'm just a sample directove to demonstrate the clearing 
        // of a $timeout event in the AngularJS $destroy event.
        app.directive(
            "bnDirective",
            function( $timeout ) {

                // I bind the User Interface events to the $scope.
                function link( $scope, element, attributes ) {

                    // When the timeout is defined, it returns a 
                    // promise object.
                    var timer = $timeout(
                        function() {

                            console.log( "Timeout executed", Date.now() );

                        },
                        2000
                    );


                    // Let's bind to the resolve/reject handlers of
                    // the timer promise so that we can make sure our
                    // cancel approach is actually working.
                    timer.then(
                        function() {

                            console.log( "Timer resolved!", Date.now() );

                        },
                        function() {

                            console.log( "Timer rejected!", Date.now() );

                        }
                    );


                    // When the DOM element is removed from the page, 
                    // AngularJS will trigger the $destroy event on 
                    // the scope. This gives us a chance to cancel any
                    // pending timer that we may have.
                    $scope.$on(
                        "$destroy",
                        function( event ) {
                            $timeout.cancel( timer );
                            console.log( "Timer Canceled!", Date.now() );
                        }
                    );

                }

                // Return the directive configuration.
                return({
                    link: link,
                    scope: false
                });

            }
        );


    </script>


</body></html>

Answer 1

如果您停留在角度应用程序中，则会触发destroy事件，但会导航到另一个路径，从而破坏与当前控制器关联的范围（例如）。

如果你关闭标签，这基本上相当于拉动插头：角度应用程序本身就完全结束了。

Answer 2

元素＆＃39; $ destroy＆＃39;从DOM中删除元素时触发事件。删除DOM后，我发现有必要销毁范围，否则范围就会消失。

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

AngularJS $ destroy永远不会被解雇？

2 个答案: