Warum verursacht dieser Angular-UI-Router-Code eine Endlosschleife in $ Digest?

Ich habe den Code so viel wie möglich gekocht. Etwas über verschachtelte Zustände und die Ereignisverarbeitung/-übertragung verursacht eine Endlosschleife. In Chrome kann ich es pausieren und sehen, dass es in Angulars $digest Funktion für immer funktioniert. Irgendeine Idee warum? Ist es ein Fehler in meinem Beispielcode oder ein Fehler in Angular oder der UI Router?

<!doctype html> 
<html ng-app='bugapp' ng-controller='BugAppCtrl'> 
<head> 
    <script src='//code.jquery.com/jquery-1.10.1.min.js'></script> 

    <!-- Angular 1.2.11 --> 
    <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js'></script> 

    <!-- UI router 0.2.8 --> 
    <script src='//cdn.jsdelivr.net/angular.ui-router/0.2.8/angular-ui-router.js'></script> 

    <script> 
angular.module('bugapp', ['ui.router']) 
    .run(function ($rootScope, $state, $stateParams) { 
    $rootScope.$state = $state; 
    $rootScope.$stateParams = $stateParams; 
    }) 
    .config(function ($locationProvider, $stateProvider, $urlRouterProvider) { 
    $locationProvider.html5Mode(false); 

    $stateProvider 
     .state("root", { 
     abstract: true, 
     url: "/servletContext?asUser", 
     template: '<div ui-view></div>' // ??? 
     }) 
     .state("root.home", { 
     abstract: true, 
     url: "/home", 
     template: "<div ng-if='hasData()' ui-view ></div>" 

     }) 
     .state("root.home.profile", { 
     url: "/profile", 
     template: '<div>whatever</div>' 
     }) 

    }) 
    .controller('BugAppCtrl', function ($scope, $state, $stateParams, $log, $location) { 
    $log.log('BugAppCtrl: constructor'); 

    $scope.hasData = function() { 
     var res = !!$scope.foo; 
     // $log.log("hasData called, returing " + res + " foo is " + $scope.foo); 
     return res; 
    }; 

    $scope.$on('$stateChangeSuccess', function() { 
     $log.log("State changed! (to " + $state.current.name + ")"); 
     $scope.foo = 'junk'; 
     $scope.$broadcast("resetfoo"); 
    }); 

    $state.go('root.home.profile'); 
    }); 
    </script> 
</head> 
<body> 
    <div ui-view></div> 
</body> 
</html>

Quelle

2014-02-07 Rob N

Ich vermute, dies einen Fehler in der Benutzeroberfläche Router ist, aus zwei Gründen:

ich Ihren Code versucht, und dann versucht, die Version von UI Router 0.2.7 Herabstufung. Als ich 0.2.7 benutzt habe, hat es funktioniert.
Auch wenn Sie weiterhin die Version 0.2.8 des UI Routers verwenden, funktioniert die Statusänderung über $ location anstelle von $ state. Hier ist ein Beispiel für die Verwendung $ Standort anstelle des $ state.go Aufruf:
```
$location.path('/servletContext/home/profile'); 
```

Obwohl ich verwenden und empfehlen UI Router (nicht ohne verschachtelte Ansichten tun), wenn Sie in Zukunft feststellen, dass möchten Sie jede Art des Abfangens oder Umleitung tun, wenn der Benutzer auf bestimmte Seiten zu gehen versucht, $ location.path ich aus Gründen statt $ Zustand, empfehlen die Verwendung von I beschrieben in a blog post

bearbeiten: ich habe nicht versucht, mit Parametern vor, aber gerade mit dem Code versucht, den du gepostet hast (ich habe einen 2. Controller erstellt und dir zugewiesen r 'root.home.profile' state), und es funktioniert. Anweisungen von UI Router sind here. Aber im Grunde, wenn Sie setzen Ihre URL in Ihrer Statusdefinition auf die gleiche Weise mit UI Router würde:

url: "/profile/:foo",

dann in Ihrem $ location.path Ruf fügen Sie den Parameter im Pfad:

$location.path('/servletContext/home/profile/12');

und Sie können auf die 12 in der Steuerung von

$stateParams.foo

Quelle

2014-02-08 13:43:57

zugreifen Das ist sehr hilfreich. Wenn Sie $ location anstelle von $ state verwenden, sind Sie auf diese Weise erfolgreich in einen Zustand mit Parametern übergegangen? –

Sieht so aus, als ob es möglich ist - ich habe es versucht und Informationen in meiner Antwort hinzugefügt. –

Für mich ist es das gleiche mit dem Standortpfad, ich gebe einige Ereignisse aus –

Warum verursacht dieser Angular-UI-Router-Code eine Endlosschleife in $ Digest?

Antwort

Verwandte Themen