Angularjs und Jquery: Angularjs Routing und jquery Skriptausführung Problem

Question

Ich habe versucht mit angularjs und jquery für die Entwicklung meiner Websites und ich bin nicht neu für sie. aber irgendwie bin ich auf ein Thema gestoßen, das mir nicht so vertraut ist.

das Hauptproblem ist zwischen eckigen Routing und jquery Dokument bereit Skriptausführung.

das Szenario i verwenden AngularJS ui-Router Seiten für meine Website-Codes (SPA) eine meiner Seite hat Inline-jquery sieht wie folgt aus

<div id="details-page"> 

</div> 

<script> 
    var counter = 0; 

    function foo() { 
     var setFoo = setInterval(function() { 
      counter++; 
      console.log(counter); 
     }, 2000); 
    } 
</script> 

foo(); 

die Codes zu durchsuchen, wie erwartet läuft, aber wenn ich go route zu anderen Seiten Ich kann meine Logs immer noch laufen sehen (die Foo-Funktion), die für mich merkwürdig erscheint, aber das ist nicht das Hauptproblem, das Hauptproblem ist, wenn ich zurück zur "Details-Seite" gehe die Funktion foo wird zurück ausgeführt wegen $ (document) .ready (function() {})) also läuft in meinem System zwei foo's das ist definitiv alles zerstört.

so mein Ziel hier ist, wie die alten foo Funktion auf STOP oder , wie die neuen Funktion foo STOP aus in kurzer Ausführung ich möchte nur eine foo Funktion in meinem System läuft dank

Answer 1

Wenn ich Dich richtig verstehe Sie möchten, dass dieser Zähler startet, wenn der Benutzer die "Details-Seite" eingibt, Sie möchten, dass er beim Verlassen weiterläuft, und wenn er zurückkehrt, muss er den ursprünglichen Zähler verwenden.

Um dies mit AngularJS zu lösen, sollten Sie einen Dienst erstellen, da Ihr Dienst ein Singleton ist und nicht spezifisch mit der "Detailseite" verknüpft ist.

Fiddle Beispiel: https://jsfiddle.net/UncleDave/g9co2172/1/

angular 
 
    .module('app', []) 
 
    .controller('DetailsCtrl', function(counterService) { 
 
    counterService.start(); 
 
    }) 
 
    .service('counterService', function($interval) { 
 
    var counter = 0; 
 
    var started = false; 
 

 
    function start() { 
 
     if (started) 
 
     return; 
 

 
     started = true; 
 

 
     $interval(function() { 
 
     counter++; 
 
     console.log(counter); 
 
     }, 2000); 
 
    } 
 

 
    return { 
 
     start: start 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="DetailsCtrl as details"> 
 
</div>

Answer 2

nur diesen Code in Ihrem Controller hinzuzufügen, und nicht zu vergessen t $rootScope und $interval Dienste in Ihrem Controller zu injizieren.

$rootScope.counter = 0; 
var setFoo; 

function foo() { 
    setFoo = $interval(function() { 
     $rootScope.counter++; 
     console.log($rootScope.counter); 
    }, 2000); 
} 

foo(); 

$rootScope.$on("$routeChangeStart", function() { 
    $interval.cancel(setFoo); 
})