AngularJS：如何从控制器function切换视图？
我正在尝试使用AngularJS的ng-clickfunction来切换视图。 我将如何去执行下面的代码？
的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? } }
为了在不同的视图之间切换，你可以直接在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
function Cntrl ($scope,$location) { $scope.changeView = function(view){ $location.path(view); // path not hash } }
并configuration路由器根据位置切换到不同的部分（如https://github.com/angular/angular-seed/blob/master/app/app.js所示）。; 这将有历史的好处，以及使用ng-view。
另外，你可以使用ng-include和不同的partials，然后使用ng-switch（ https://github.com/ganarajpr/Angular-UI-Components/blob/master/index.html ）
所提供的答案是绝对正确的，但是我想扩展为任何未来的访问者谁可能要更dynamic地做到这一点 –
在视图中 –
<div ng-repeat="person in persons"> <div ng-click="changeView(person)"> Go to edit <div> <div>
在控制器 –
$scope.changeView = function(person){ var earl = '/editperson/' + person.id; $location.path(earl); }
与被接受的答案相同的基本概念，只是增加一些dynamic的内容，以提高一点。 如果接受的答案想要添加这个，我会删除我的答案。
我有一个例子工作。
以下是我的文档的外观：
<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>
这是我的部分看起来像：
<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>
这是我的Ctrl看起来像：
app.controller('Index', function($scope, $routeParams, $location){ $scope.auth = function(){ $location.url('/map'); }; });
应用程序是我的模块：
var app = angular.module('app', ['ngResource']).config(function($routeProvider)...
希望这是有帮助的！
这个问题以前的所有答案的方法build议改变url是没有必要的，我认为读者应该知道一个替代解决scheme。 我使用ui-router和$ stateProvider将一个状态值与一个指向您的视图的html文件的templateUrl关联起来。 然后，只需要将$ state注入到控制器中，然后调用$ state.go（'state-value'）来更新视图。
angular-route和angular-ui-router有什么区别？
有两种方法：
如果您使用的是ui-router或$stateProvider ，请执行以下操作：
$state.go('stateName'); //remember to add $state service in the controller
如果您使用的是angular路由器或$routeProvider ，请按照下列步骤操作：
$location.path('routeName'); //similarily include $location service in your controller
如果不进行默认路由（＃/ ViewName）环境的全面修改，我可以对Cody的提示做一些修改，使其工作得很好。
控制器
.controller('GeneralCtrl', ['$route', '$routeParams', '$location', function($route, $routeParams, $location) { ... this.goToView = function(viewName){ $location.url('/' + viewName); } }] );
风景
... <li ng-click="general.goToView('Home')">HOME</li> ...
当我试图将一个Kendo Mobile UI小部件集成到一个angular度环境中时，我带来了这个解决scheme。我失去了我的控制器的上下文，并且常规锚标记的行为也被劫持。 我重新build立了我的上下文从Kendo小部件，需要使用一种方法来导航…这工作。
感谢以前的post！
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');
希望对你有帮助
这个小function对我很好：
//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; } };
你不需要完整的path，只需要切换到的视图
