All geek questions in one place

AngularJS $ destroy never works?

In angularJS, I want to do something, when the area is destroyed, when I searched in the line, I went to this page: http://www.bennadel.com/blog/2548-Don-t-Forget-To-Cancel-timeout- Timers-In-Your-destroy-Events-In-AngularJS.htm? & _ = 0.5475860409906698 # comments_44655

I changed the code a bit, as shown below, but $ destroy does not seem to be fired. after closing the browser tab or switching to another URL, I can’t see anything in the console window.

Can anyone help?

Thanks in advance.

<!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.imtqy.com/JavaScript-Demos/vendor/jquery/jquery-2.0.3.min.js">
    </script>
    <script type="text/javascript" src="http://bennadel.imtqy.com/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 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>
+4
source share
2 answers

destroy , angular, , , , ().

, : angular .

+4

'$ destroy' DOM. DOM , .

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

Source: https://habr.com/ru/post/1536666/

More articles:


All Articles