是否有可能將離子樹列表與導航視圖相結合？

Question

我正在研究一個帶有離子選項卡的網絡應用程序。 在我的一個頁面上，我實現了GitHub的離子樹列表（Ion-tree-list from GitHub）作爲treeview。 在services.js我得到了我的樹源：

.factory('VerificationTree', function() { 
    var verificationTree = [ 
     { 
      id: 'operator', 
      name: 'Operator' 
     }, 
     { 
      id: 'type_of_test', 
      name: 'Type of test', 
     }, 
     { 
      id: 'system', 
      name: 'System' 
     }, 
     { 
      id: 'component', 
      name: 'Component' 
     }, 
     { 
      id: 'component_group', 
      name: 'Component group', 
      tree: [ 
       { 
        id: 'component2', 
        name: 'Component' 
       } 
      ] 
     } 
    ]; 

    return { 
     all: function() { 
      return verificationTree; 
     } 
    }; 
}) 

當我點擊一個樹中的項目 - 體育「type_of_test」 - 我想打開另一個頁面。 在controller.js中，我爲該頁面定義了一個控制器。 控制器內部是一個函數，它通過window.open打開頁面。

.controller('VerificationCtrl', function ($scope, VerificationTree) { 
    $scope.verificationTree = VerificationTree.all(); 
    $scope.$on('$ionTreeList:ItemClicked', function (event, item) { 
     if (item.id == 'type_of_test') { 
      window.open('templates/type-of-test.html'); 
     }; 
     //if (item.id == 'component2') { 
     // alert('The ion-tree-list item component2 was clicked'); 
     //}; 
    }) 
}) 

頁面在新選項卡中打開，但佈局不再好。 是否有可能將樹與導航視圖組合在一起？

.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 

    .state('tab', { 
    url: '/tab', 
    abstract: true, 
    templateUrl: 'templates/tabs.html' 
    }); 

或者又如：

var app = angular.module('myApp', ['ionic']); 
app.config(function($stateProvider) { 
    $stateProvider 
    .state('index', { 
    url: '/', 
    templateUrl: 'home.html' 
    }) 
    .state('music', { 
    url: '/music', 
    templateUrl: 'music.html' 
    }); 
}); 

Answer 1

不知道如果我得到你的權利，但這樣做一個簡單的狀態變化，被點擊的項目時什麼？

$stateProvider.state("tabs", { 
    url: "/tabs", 
    templateUrl: "templates/TabView.html", 
    abstract: true, 
    controller: "TabCtrl as tab" 
    }).state("tabs.home", { 
     url: "/overview", 
     templateUrl: "templates/HomeView.html", 
     controller: "HomeCtrl" 
    }).state("tabs.detail", { 
     url: "/detail/:id", 
     templateUrl: "templates/DetailView.html", 
     controller: "DetailCtrl" 
    }) 

在HomeView，添加您的TreeList和定義點擊功能如下：

.controller('HomeCtrl', function ($scope, $state, VerificationTree) { 
    $scope.verificationTree = VerificationTree.all(); 
    $scope.$on('$ionTreeList:ItemClicked', function (event, item) { 
     if (item.id == 'type_of_test') { 
      $state.go('tabs.detail') 
     }; 
    }) 
}) 

如果你想在這個項目作爲一個參數去傳遞，你可以在stateProvider配置定義這個問題，以及。檢查UI-Router文檔以獲取更多信息。 https://github.com/angular-ui/ui-router/wiki/URL-Routing

另外，如果您不想在單擊某個項目時轉換到另一個選項卡，而是保留在選項卡中並只更改狀態，則可以嘗試嵌套狀態。從概述

$stateProvider.state("tabs", { 
    url: "/tabs", 
    templateUrl: "templates/TabView.html", 
    abstract: true, 
    controller: "TabCtrl as tab" 
    }).state("tabs.home", { 
     url: "/home", 
     abstract: true, 
     views: { 
     "home": { 
      template: "<ion-nav-view></ion-nav-view>" 
     } 
     } 
    }).state("tabs.home.overview", { 
     url: "/overview", 
     templateUrl: "templates/HomeView.html", 
     controller: "HomeCtrl" 
    }).state("tabs.home.detail", { 
     url: "/detail/:id", 
     templateUrl: "templates/DetailView.html", 
     controller: "DetailCtrl" 
    }) 

然後過渡到詳細信息這樣的：你可以定義你的狀態是這樣

$state.go('tabs.home.detail')