Sie sind hier: Weblog

AngularJS und UI-Router: Programmatischer Zugriff auf Zustände

Foto ,
31.03.2014 22:04:00

In den letzten Beiträgen unter [1], [2] und [3] bin ich auf das externe Modul UI-Router eingegangen. Dieser Beitrag zeigt, wie der Entwickler programmatisch zwischen Zuständen wechseln kann. Dazu kann er den Service $state heranziehen. Über dessen Eigenschaft current.name kann er den Namen des aktuellen Zustands in Erfahrung bringen; über dessen Funktion go kann er den Zustand wechseln. Die Beispiele in den nachfolgenden Listings veranschaulichen dies.

app.controller("FlugBuchenCtrl", ["$scope", "$http", "$q", "$stateParams", "$state",
    function ($scope, $http, $q, $stateParams, $state) {

        $scope.vm = new FlugBuchenVM($scope, $http, $q, $stateParams, $state);

}]);

 

function FlugBuchenVM(scope, http, q, stateParams, state) {

    […]

    this.stateParams = stateParams;
    this.state = state;

    this.goToNextState = function () {

         var current = this.state.current.name;

         switch(current) {

            case "flugbuchung.passagier":
                this.state.go("flugbuchung.flug");
            break;

            case "flugbuchung.flug":
                this.state.go("flugbuchung.buchen");
            break;
        }   
    }
}

 

[1] http://www.softwarearchitekt.at/post/2014/03/19/AngularJS-und-UI-Router-Routing-Parameter.aspx

[2] http://www.softwarearchitekt.at/post/2014/03/14/Mehrere-Views-pro-Template-in-AngularJS-mit-UI-Router.aspx

[3] http://www.softwarearchitekt.at/post/2014/03/10/Verschachtelte-Views-mit-AngularJS-und-UI-Router.aspx