Javascript AngularJS：如何从控制器功能切换视图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11003916/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS : How do I switch views from a controller function?
提问by The_Brink
I am trying to use the ng-clickfeature of AngularJS to switch views. How would I go about doing this with the code below?
我正在尝试使用AngularJS的ng-click功能来切换视图。我将如何使用下面的代码执行此操作？
index.html
索引.html
<div ng-controller="Cntrl">
<div ng-click="someFunction()">
click me
<div>
<div>
controller.js
控制器.js
function Cntrl ($scope) {
$scope.someFunction = function(){
//code to change view?
}
}
回答by ganaraj
In order to switch between different views, you could directly change the window.location (using the $location service!) in index.html file
为了在不同的视图之间切换，您可以直接更改 index.html 文件中的 window.location（使用 $location 服务！）
<div ng-controller="Cntrl">
<div ng-click="changeView('edit')">
edit
</div>
<div ng-click="changeView('preview')">
preview
</div>
</div>
Controller.js
控制器.js
function Cntrl ($scope,$location) {
$scope.changeView = function(view){
$location.path(view); // path not hash
}
}
and configure the router to switch to different partials based on the location ( as shown here https://github.com/angular/angular-seed/blob/master/app/app.js). This would have the benefit of history as well as using ng-view.
并配置路由器以根据位置切换到不同的部分（如下所示https://github.com/angular/angular-seed/blob/master/app/app.js）。这将有利于历史以及使用 ng-view。
Alternatively, you use ng-include with different partials and then use a ng-switch as shown in here ( https://github.com/ganarajpr/Angular-UI-Components/blob/master/index.html)
或者，您可以将 ng-include 与不同的部分一起使用，然后使用 ng-switch，如下所示（https://github.com/ganarajpr/Angular-UI-Components/blob/master/index.html）
回答by PW Kad
The provided answer is absolutely correct, but I wanted to expand for any future visitors who may want to do it a bit more dynamically -
提供的答案是绝对正确的，但我想为任何可能想要更动态地做的未来访问者扩展 -
In the view -
在看来——
<div ng-repeat="person in persons">
<div ng-click="changeView(person)">
Go to edit
<div>
<div>
In the controller -
在控制器中 -
$scope.changeView = function(person){
var earl = '/editperson/' + person.id;
$location.path(earl);
}
Same basic concept as the accepted answer, just adding some dynamic content to it to improve a bit. If the accepted answer wants to add this I will delete my answer.
与接受的答案相同的基本概念，只是添加了一些动态内容以改进一点。如果接受的答案要添加此内容，我将删除我的答案。
回答by Cody
I've got an example working.
我有一个工作示例。
Here's how my doc looks:
这是我的文档的外观：
<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>
Here's what my partial looks like:
这是我的部分内容：
<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>
Here's what my Ctrl looks like:
这是我的 Ctrl 的样子：
app.controller('Index', function($scope, $routeParams, $location){
$scope.auth = function(){
$location.url('/map');
};
});
app is my module:
应用程序是我的模块：
var app = angular.module('app', ['ngResource']).config(function($routeProvider)...
Hope this is helpful!
希望这是有帮助的！
回答by Gavin Palmer
The method used for all previous answers to this question suggest changing the url which is not necessary, and I think readers should be aware of an alternative solution. I use ui-router and $stateProvider to associate a state value with a templateUrl which points to the html file for your view. Then it is just a matter of injecting the $state into your controller and calling $state.go('state-value') to update your view.
用于此问题的所有先前答案的方法建议更改不必要的 url，我认为读者应该知道替代解决方案。我使用 ui-router 和 $stateProvider 将状态值与指向视图的 html 文件的 templateUrl 相关联。然后只需将 $state 注入您的控制器并调用 $state.go('state-value') 来更新您的视图。
What is the difference between angular-route and angular-ui-router?
回答by Sukhminder Parmar
There are two ways for this:
有两种方法：
If you are using ui-router or $stateProvider, do it as:
如果您使用 ui-router 或$stateProvider，请执行以下操作：
$state.go('stateName'); //remember to add $state service in the controller
if you are using angular-router or $routeProvider, do it as:
如果您使用 angular-router 或$routeProvider，请执行以下操作：
$location.path('routeName'); //similarily include $location service in your controller
回答by beauXjames
Without doing a full revamp of the default routing (#/ViewName) environment, I was able to do a slight modification of Cody's tip and got it working great.
无需对默认路由 (#/ViewName) 环境进行全面改造，我就能够对 Cody 的提示稍作修改并使其运行良好。
the controller
控制器
.controller('GeneralCtrl', ['$route', '$routeParams', '$location',
function($route, $routeParams, $location) {
...
this.goToView = function(viewName){
$location.url('/' + viewName);
}
}]
);
the view
风景
...
<li ng-click="general.goToView('Home')">HOME</li>
...
What brought me to this solution was when I was attempting to integrate a Kendo Mobile UI widget into an angular environment I was losing the context of my controller and the behavior of the regular anchor tag was also being hiHymaned. I re-established my context from within the Kendo widget and needed to use a method to navigate...this worked.
使我想到这个解决方案的是，当我尝试将 Kendo Mobile UI 小部件集成到有角度的环境中时，我丢失了控制器的上下文，并且常规锚标记的行为也被劫持了。我从 Kendo 小部件中重新建立了我的上下文，并需要使用一种方法来导航......这有效。
Thanks for the previous posts!
感谢之前的帖子！
回答by Vaishali Tekale
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');
Hope this will help you
希望能帮到你
回答by Shawn Dotey
This little function has served me well:
这个小功能对我很有帮助：
//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;
}
};
You dont need the full path, just the view you are switching to
您不需要完整路径，只需要您要切换到的视图
