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

javascript angularjs ngroute

2022-08-30 00:47:30

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

索引.html

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

控制器.js

  function Cntrl ($scope) {
        $scope.someFunction = function(){
            //code to change view?
        }
    }

答案 1

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

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

控制器.js

function Cntrl ($scope,$location) {
        $scope.changeView = function(view){
            $location.path(view); // path not hash
        }
    }

并将路由器配置为根据位置切换到不同的部分（如此处所示 https://github.com/angular/angular-seed/blob/master/app/app.js）。这将具有历史记录以及使用ng-view的好处。

或者，将 ng-include 与不同的部分一起使用，然后使用 ng 开关，如下所示（ https://github.com/ganarajpr/Angular-UI-Components/blob/master/index.html )

答案 2

提供的答案是绝对正确的，但我想为任何将来可能想要更动态地做到这一点的访问者进行扩展 -

在视图中 -

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

与接受的答案相同的基本概念，只是添加一些动态内容以改进一点。如果接受的答案想要添加此内容，我将删除我的答案。