J'essaie d'utiliser la fonctionnalité ng-click de AngularJS pour changer de vue. Comment ferais-je cela 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?
}
}
Pour basculer entre les différentes vues, vous pouvez directement modifier la fenêtre.emplacement (en utilisant le $service de localisation!) dans index.html fichier
<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 configurer le routeur pour changer de partiels en fonction de l'emplacement ( comme illustré ici https://github.com/angular/angular-seed/blob/master/app/js/app.js ). Cela aurait l'avantage de l'histoire ainsi que l'utilisation de ng-view.
Sinon, vous utilisez ng-inclure avec les différents partiels et ensuite utiliser un ng-interrupteur comme indiqué ici ( https://github.com/ganarajpr/Angular-UI-Components/blob/master/index.html )
La réponse fournie est tout à fait correcte, mais je voulais élargir pour les futurs visiteurs qui pourraient vouloir 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, il suffit d'ajouter du contenu dynamique pour améliorer un peu. Si la réponse acceptée veut ajouter ceci, je vais supprimer ma réponse.
J'ai un exemple de travail.
Voici comment j'ai mes documents:
<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 c'est utile!
Sans en faire une complète refonte de l'acheminement par défaut (#/ViewName) de l'environnement, j'ai été capable de faire une légère modification de Cody pointe et il a obtenu un travail formidable.
le contrôleur
.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 a été quand j'ai été de tenter d'intégrer un Kendo INTERFACE Mobile widget en angle, j'ai été perdre le contexte de mon contrôleur et le comportement de l'ordinaire balise d'ancrage a également été victime d'un détournement. J'ai rétabli mon contexte de dans le Kendo widget et nécessaires à l'utilisation d'une méthode pour naviguer...cela a fonctionné.
Merci pour les posts précédents!
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
