Javascript AngularJS：如何从控制器函数切换视图？_Javascript_Angularjs_Ngroute

Javascript AngularJS：如何从控制器函数切换视图？

javascript angularjs

Javascript AngularJS：如何从控制器函数切换视图？,javascript,angularjs,ngroute,Javascript,Angularjs,Ngroute,我正在尝试使用AngularJS的ng click功能切换视图。我将如何使用下面的代码来执行此操作 index.html <div ng-controller="Cntrl"> <div ng-click="someFunction()"> click me <div> <div> 为了在不同视图之间切换，您可以直接在中更改window.location（使用$location服务

我正在尝试使用AngularJS的ng click功能切换视图。我将如何使用下面的代码来执行此操作

index.html

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

为了在不同视图之间切换，您可以直接在中更改window.location（使用$location服务！） index.html文件

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

并根据位置将路由器配置为切换到不同的分区（如图所示）。这将有利于历史以及使用ng视图

或者，将ng include与不同的partials一起使用，然后使用ng开关，如图所示（）

我已经有了一个工作示例

下面是我的医生的样子：

<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>

应用程序是我的模块：

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

希望这是有帮助的

提供的答案是绝对正确的，但我想为未来可能希望更动态地进行此操作的任何访问者扩展-

认为—

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

与公认的答案相同的基本概念，只是添加了一些动态内容来进行改进。如果接受的答案想要添加这个，我将删除我的答案。

在没有对默认路由（#/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>
...

。。。
主页
...

让我想到这个解决方案的是，当我试图将一个剑道移动UI小部件集成到一个角度环境中时，我失去了控制器的上下文，常规锚标记的行为也被劫持了。我从剑道小部件中重新建立了我的上下文，需要使用一种方法来导航…这很有效

感谢以前的帖子

以前所有回答这个问题的方法都建议更改url，这是不必要的，我认为读者应该知道另一种解决方案。我使用ui路由器和$stateProvider将状态值与templateUrl相关联，templateUrl指向html文件供您查看。然后，只需将$state注入控制器并调用$state.go（'state-value'）来更新视图

希望这对您有所帮助

这个小功能对我很有用：

    //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;
        }


    };

您不需要完整路径，只需要切换到的视图有两种方法：

如果您使用的是ui路由器或

$stateProvider

，请按以下步骤操作：

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

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

如果您使用的是角度路由器或

$routeProvider

，请按以下步骤操作：

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

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

我得到一个错误，说散列不是$location的函数。我不认为散列是$location对象的一部分，但有一个$$hash变量，就是这样，如果是这样，它就不起作用了。好的，我找到了怎么做的方法$位置、路径（视图）；（）@The_Brink感谢您的编辑。我不知道为什么它被拒绝了。我做了一些改变来反映我想说的话。实际上最好的做法就是建立一个正常的链接<代码>Angular将确保单击不会创建页面重新加载。可以修改此行为，以便在需要时触发重新加载。完全是吹毛求疵，但仅供参考，

url

实际上是完整的网址，包括协议（http://）和所有内容。正如

$location.path（）

所暗示的那样，最好将变量描述为

路径

。但它需要$rootScope。$digest（）；或$scope.$apply（）；为了让它不被耽搁地移动。让我绊倒的一件事是使用了路线名称而不是州名称。。。i、 e.它应该是“main”而不是“/main”

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');

    //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;
        }


    };

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

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