導航到網頁的其他部分

Question

我想從一個控件導航到另一個網頁。請在下面找到示例代碼。當用戶點擊頁面上的任何組件時，他應該導航到其他控制器。

示例代碼：

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> 

Answer 1

首先，你需要把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; 
} 

在按鍵改變onclick到ng-click。

Plunker更新：http://plnkr.co/edit/pYtwQXfTVEufxr2nqzWx?p=preview

Answer 2

你有你的函數傳遞到範圍並操縱它適合你的邏輯，你可以試試：

在HTML

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

在JS

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

      }; 

工作plunker： http://plnkr.co/edit/cHKyMSKnN1wRRKFxsOPa?p=preview