Is it possible to combine ion-tree-list with a navigation view?

Question

I'm working on a web-app with ionic tabs. On one of my pages i implemented the ion-tree-list from GitHub (Ion-tree-list from GitHub) as treeview. In services.js i got the source for my tree:

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

When i click on one the tree items - p.e. "type_of_test" - i want to open another page. In controller.js i have defined a controller for the page with the tree. Inside the Controller is a function, which opens the page by 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');
        //};
    })
})

The page opens in a new tab but the layout is not okay anymore. Is there a possibility to combine the tree with a navigation view like the following?

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

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

Or another example:

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

Not sure if I get you right, but what about doing a simple state change, when an item is clicked?

  $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"
  })

On HomeView, add your TreeList and define the click function as follows:

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

If you want to pass in the item as a param, you can define this in the stateProvider configuration as well. Check the UI-Router docs for additional information. https://github.com/angular-ui/ui-router/wiki/URL-Routing

Also if you don't want to transition to another tab when clicking an item, but stay in the tab and just change the state, you might try nested states. You could define your states like this:

  $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"
  })

And then transition from Overview to Detail like this:

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