Javascript 导航到网页的其他部分

我想在网页中从一个控件导航到另一个控件。请在下面找到示例代码。当用户单击页面上的任何组件时，他应该导航到其他控制器

示例代码：

var app = angular.module('plunker', ['ui.bootstrap']);
app.controller("TabsParentController", function($scope) {
  var setAllInactive = function() {
    angular.forEach($scope.workspaces, function(workspace) {
      workspace.active = false;
    });
  };
  $scope.workspaces = [{
    id: 1,
    name: "Tab1",
    active: true
  }, {
    id: 2,
    name: "Tab2",
    active: false
  }, {
    id: 3,
    name: "Tab3",
    active: false
  }];
  $scope.addWorkspace = function() {
    setAllInactive();
  };
});
app.controller("TabsChildController", function($scope, $log) {});

function goToNextTab() {
  alert("click");
}

Html代码：

<div ng-controller="TabsParentController">
    <tabset>
        <tab ng-repeat="workspace in workspaces"
             heading="{{workspace.name}}"
             active=workspace.active>
             <div ng-controller="TabsChildController">
               Tab Name: <input type="text" ng-model="workspace.name"/>
            </div>          
        <input type="button" name="clickMe" value="clickMe" onclick="goToNextTab()" class="nexttab"/>

         </tab>
    </tabset>
</div>

选项卡名称：

首先需要将

goToNextTab

函数放在角度范围内，然后获取当前活动工作空间索引并将其递增。因此，将下一个工作空间更改为活动

$scope.goToNextTab = function() {
    var index = 0;
    for (; index < $scope.workspaces.length; index++) {
        if ($scope.workspaces[index].active) {
            $scope.workspaces[index].active = false;
            break;
        }
    }
    index++;
    if (index >= $scope.workspaces.length) {
        index = 0;
    }
    $scope.workspaces[index].active = true;
}

$scope.goToNextTab=function（）{
var指数=0；
对于（；索引<$scope.workspace.length；索引++）{
如果（$scope.workspaces[index].active）{
$scope.workspaces[index].active=false；
打破
}
}
索引++；
如果（索引>=$scope.workspaces.length）{
指数=0；
}
$scope.workspaces[index].active=true；
}

在按钮中，将

onclick

更改为

ng，单击

---

Plunker更新：

您必须将函数传递到作用域中并对其进行操作以符合您的逻辑，请尝试以下操作：

在HTML中

工作冲击器：

<!-- we are passing the object to the click function-->
<input type="button" name="clickMe" value="clickMe" ng-click="goToNextTab(workspace)" class="nexttab"/>

$scope.goToNextTab = function(getTab){
              // according to you post we want to go to next tab and if we are in last tab we ant to go to first
             // remember this can be any logic
              var goTo = getTab.id===3 ? 1: getTab.id+1;
              // setting the tab active attribute to true 
              var newState = $scope.workspaces.map(function(item){ item.active = item.id===goTo ? true : false; return item;});
              // assigning new vales to workspace scope
             console.log(newState); $scope.workspaces = newState;

            };