web-dev-qa-db-fra.com

AngularJS: Comment changer de vue depuis une fonction de contrôleur?

J'essaie d'utiliser la fonctionnalité ng-click de AngularJS pour changer de vue. Comment pourrais-je m'y prendre avec le code ci-dessous?

index.html

 <div ng-controller="Cntrl">
        <div ng-click="someFunction()">
            click me
        <div>
    <div>

controller.js

  function Cntrl ($scope) {
        $scope.someFunction = function(){
            //code to change view?
        }
    }
javascriptangularjsngroute
237
The_Brink

Afin de basculer entre différentes vues, vous pouvez changer directement le window.location (en utilisant le service $ location!) Dans le fichier index.html

<div ng-controller="Cntrl">
        <div ng-click="changeView('edit')">
            edit
        </div>
        <div ng-click="changeView('preview')">
            preview
        </div>
</div>

Controller.js

function Cntrl ($scope,$location) {
        $scope.changeView = function(view){
            $location.path(view); // path not hash
        }
    }

et configurez le routeur pour basculer vers différents partiels en fonction de l'emplacement (comme indiqué ici https://github.com/angular/angular-seed/blob/master/app/app.js ). Cela aurait l'avantage de l'histoire ainsi que d'utiliser ng-view.

Vous pouvez également utiliser ng-include avec différentes partielles, puis utiliser un commutateur ng comme indiqué ici ( https://github.com/ganarajpr/Angular-UI-Components/blob/master/index.html )

314
ganaraj

La réponse fournie est tout à fait correcte, mais je voulais développer pour tous les futurs visiteurs souhaitant le faire de manière plus dynamique -

Dans la vue -

<div ng-repeat="person in persons">
    <div ng-click="changeView(person)">
        Go to edit
    <div>
<div>

Dans le contrôleur -

$scope.changeView = function(person){
    var earl = '/editperson/' + person.id;
    $location.path(earl);
}

Même concept de base que la réponse acceptée, ajoutant simplement un contenu dynamique pour améliorer un peu. Si la réponse acceptée souhaite ajouter ceci, je supprimerai ma réponse.

38
PW Kad

J'ai un exemple de travail.

Voici à quoi ressemble ma doc:

<html>
<head>
    <link rel="stylesheet" href="css/main.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-resource.min.js"></script>
    <script src="js/app.js"></script>
    <script src="controllers/ctrls.js"></script>
</head>
<body ng-app="app">
    <div id="contnr">
        <ng-view></ng-view>
    </div>
</body>
</html>

Voici à quoi ressemble mon partiel:

<div id="welcome" ng-controller="Index">
    <b>Welcome! Please Login!</b>
    <form ng-submit="auth()">
        <input class="input login username" type="text" placeholder="username" /><br>
        <input class="input login password" type="password" placeholder="password" /><br>
        <input class="input login submit" type="submit" placeholder="login!" />
    </form>
</div>

Voici à quoi ressemble ma Ctrl:

app.controller('Index', function($scope, $routeParams, $location){
    $scope.auth = function(){
        $location.url('/map');
    };
});

app est mon module:

var app = angular.module('app', ['ngResource']).config(function($routeProvider)...

J'espère que c'est utile!

23
Cody

La méthode utilisée pour toutes les réponses précédentes à cette question suggère de changer l'URL, ce qui n'est pas nécessaire, et je pense que les lecteurs devraient être conscients d'une solution alternative. J'utilise ui-router et $ stateProvider pour associer une valeur d'état à un templateUrl qui pointe vers le fichier html. Ensuite, il suffit d'injecter le $ state dans votre contrôleur et d'appeler $ state.go ('state-value') pour mettre à jour votre vue.

Quelle est la différence entre angular-route et angular-ui-router?

12
Gavin Palmer

Il y a deux façons pour cela:

Si vous utilisez ui-router ou $stateProvider, procédez comme suit:

$state.go('stateName'); //remember to add $state service in the controller

si vous utilisez angular-router ou $routeProvider, procédez comme suit:

$location.path('routeName'); //similarily include $location service in your controller
5
Sukhminder Parmar

Sans une refonte complète de l'environnement de routage par défaut (#/ViewName), j'ai été en mesure de modifier légèrement le conseil de Cody et de le faire fonctionner correctement.

le controlle

.controller('GeneralCtrl', ['$route', '$routeParams', '$location',
        function($route, $routeParams, $location) {
            ...
            this.goToView = function(viewName){
                $location.url('/' + viewName);
            }
        }]
    );

la vue

...
<li ng-click="general.goToView('Home')">HOME</li>
...

Ce qui m'a amené à cette solution, c'est que lorsque je tentais d'intégrer un widget d'interface utilisateur Kendo Mobile dans un environnement angular, je perdais le contexte de mon contrôleur et que le comportement de la balise d'ancrage normale était également détourné. J'ai rétabli mon contexte depuis le widget Kendo et je devais utiliser une méthode pour naviguer ... cela fonctionnait.

Merci pour les posts précédents!

3
beauXjames

Cette petite fonction m'a bien servi:

    //goto view:
    //useage -  $scope.gotoView("your/path/here", boolean_open_in_new_window)
    $scope.gotoView = function (st_view, is_newWindow)
    {

        console.log('going to view: ' + '#/' + st_view, $window.location);
        if (is_newWindow)
        {
            $window.open($window.location.Origin + $window.location.pathname + '' + '#/' + st_view, '_blank');
        }
        else
        {
            $window.location.hash = '#/' + st_view;
        }


    };

Vous n'avez pas besoin du chemin complet, mais de la vue vers laquelle vous passez

2
Shawn Dotey
Firstly you have to create state in app.js as below

.state('login', {
      url: '/',
      templateUrl: 'views/login.html',
      controller: 'LoginCtrl'
    })

and use below code in controller

 $location.path('login');

J'espère que cela vous aidera

2
Vaishali Tekale