J'essaie d'utiliser la fonction ng-click d'AngularJS pour changer de vue. Comment pourrais-je procéder 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?
}
}Réponses:
Afin de basculer entre différentes vues, vous pouvez modifier 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 l'utilisation de ng-view.
Alternativement, vous utilisez ng-include avec différents partiels, puis utilisez un ng-switch comme indiqué ici ( https://github.com/ganarajpr/Angular-UI-Components/blob/master/index.html )
<a href="https://stackoverflow.com/edit">Edit</a> Angular s'assurera que le clic ne crée pas de rechargement de page. Ce comportement peut être modifié afin qu'il déclenche un rechargement si cela est souhaité.
La réponse fournie est absolument correcte, mais je voulais développer pour tous les futurs visiteurs qui voudraient le faire un peu plus dynamiquement -
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, en y ajoutant simplement du contenu dynamique pour l'améliorer un peu. Si la réponse acceptée veut l'ajouter, je supprimerai ma réponse.
urlest en fait l' adresse Web complète , y compris le protocole (http: //) et tout. Comme l'indique $location.path()votre variable, il vaut mieux le décrire comme un path.
J'ai un exemple qui fonctionne.
Voici à quoi ressemble mon 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 mon Ctrl:
app.controller('Index', function($scope, $routeParams, $location){
$scope.auth = function(){
$location.url('/map');
};
});l'application est mon module:
var app = angular.module('app', ['ngResource']).config(function($routeProvider)...J'espère que cela vous sera utile!
La méthode utilisée pour toutes les réponses précédentes à cette question suggère de changer l'URL 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 pour votre vue. Ensuite, il suffit d'injecter l'état $ 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?
Il y a deux façons de procéder:
Si vous utilisez ui-router ou $stateProvider, faites-le comme:
$state.go('stateName'); //remember to add $state service in the controllersi vous utilisez un routeur angulaire ou $routeProviderfaites-le comme:
$location.path('routeName'); //similarily include $location service in your controllerSans faire une refonte complète de l'environnement de routage par défaut (# / ViewName), j'ai pu faire une légère modification de l'astuce de Cody et 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 lorsque j'essayais d'intégrer un widget Kendo Mobile UI dans un environnement angulaire, je perdais le contexte de mon contrôleur et le comportement de la balise d'ancrage régulière était également détourné. J'ai rétabli mon contexte à partir du widget Kendo et j'avais besoin d'utiliser une méthode pour naviguer ... cela a fonctionné.
Merci pour les messages précédents!
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 ceci vous aidera
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, juste la vue vers laquelle vous passez