Question

我正在开发一个带有离子标签的网络应用。在我的一个页面上，我将GitHub（Ion-tree-list from GitHub）中的ion-tree-list实现为树视图。在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;
        }
    };
})

当我点击一个树项目时 - p.e. “type_of_test” - 我想打开另一页。在controller.js中，我已经为树的页面定义了一个控制器。 Controller内部是一个函数，它通过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')

是否可以将ion-tree-list与导航视图结合起来？

1 个答案: