Question

我不得不改变我的帖子。我的问题是以下标签视图：

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

    <ion-tab title="Text" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" ui-sref="app.pola-edit-tabs.text">
        <ion-nav-view name="tab-text"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Style" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" ui-sref="app.pola-edit-tabs.style">
        <ion-nav-view name="tab-style"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Preview" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" ui-sref="app.pola-edit-tabs.preview">
        <ion-nav-view name="tab-preview"></ion-nav-view>
    </ion-tab>

</ion-tabs>

属于它的JavaScript文件如下：

angular.module("App.Pola-Edit-Tabs", [])

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.state("app.pola-edit-tabs", {
        url: "/home/pola/edit/tabs",
        abstract: true,
        templateUrl: "templates/pola_edit_tabs.html"
    }).state("app.pola-edit-tabs.text", {
        url: "/text",
        views: {
            "tab-text": {
                templateUrl: "templates/pola_edit_tabs_text.html",
                controller: "PolaEditTabsTextController"
            }
        },
        params: {
            index: null
        }
    }).state("app.pola-edit-tabs.style", {
        url: "/style",
        views: {
            "tab-style": {
                templateUrl: "templates/pola_edit_tabs_style.html",
                controller: "PolaEditTabsStyleController"
            }
        },
        params: {
            index: null
        }
    })
    .state("app.pola-edit-tabs.preview", {
        url: "/preview",
        views: {
            "tab-preview": {
                templateUrl: "templates/pola_edit_tabs_preview.html",
                controller: "PolaEditTabsPreviewController"
            }
        },
        params: {
            index: null
        }
    });
})

.controller("PolaEditTabsTextController", function () {

})

.controller("PolaEditTabsStyleController", function () {

})

.controller("PolaEditTabsPreviewController", function () {

});

但是当我使用state.go

来调用它时

angular.module("App.Pola-Edit", ["App.Pola-Edit-Tabs"])

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state("app.pola-edit", {
        url: "/home/pola/edit",
        views: {
            "menuContent": {
                templateUrl: "templates/pola_edit.html",
                controller: "PolaEditController"
            }
        },
        params: {
            size: null
        }
    });
})

.controller("PolaEditController", function ($state, $scope) {
    $scope.title = function (index) {
        $state.go("app.pola-edit-tabs.text", {
            index: index
        });
    };
});

Nothign发生了。视图没有显示，我没有日志输出。所以没有错误，没有警告。我将每一行与示例选项卡项目here进行了比较，对我而言，它似乎完全相同。那么为什么它不起作用呢。

这是Plunker

Answer 1

我注意到您的标签和路线存在一个问题。

您的tabs指令中有3个标签：

<ion-nav-view name="tab-text"></ion-nav-view>

<ion-nav-view name="tab-style"></ion-nav-view>

<ion-nav-view name="tab-preview"></ion-nav-view>

您在那里设置的名称必须用于views对象中的特定ruote：

.state("app.pola-edit-tabs-style", {
        url: "/home/pola/edit/tabs/style",
        views: {
            "tab-style": {
                templateUrl: "templates/pola_edit_tabs_style",
                controller: "PolaEditTabsStyleController"
            }
        }
    })

如您所见，第二个标签的名称为tab-style。

您缺少的另一件事是加载标签模板的abastract（base）样式。您可以找到示例here。

为什么要在另一个模块中定义路线？ John Papa在他的Angular Style Guide suggests中：

为模块中存在的视图定义路径。每个模块应该包含模块中视图的路由。

但是你似乎在分离两个不同模块中的选项卡的基本状态。

我可以看到你正在使用menuContent。通常，当你有侧边菜单时你会这样做。我对吗？如果您想将侧边栏与标签混合使用，您可能需要查看此plunker。

您的代码存在一些问题。脚本加载两次（ionic.bundle.js）和其他一些无法找到的css。

您的州app.foo正在尝试加载该模块中不存在的控制器（PolaEditController）。

你所在州的参数没有任何意义，因为它从未使用过：

.state("app.tabs.text", {
        url: "/text",
        views: {
            "tab-text": {
                templateUrl: "tabs_text.html",
                controller: "PolaEditTabsTextController"
            }
        },
        params: {
            index: null
        }

由于您正在使用侧边菜单，因此需要在视图中加载选项卡的抽象状态：

.state("app.tabs", {
    url: "/tabs",
    abstract: true,
    views: {
    'menuContent': {
      templateUrl: "tabs.html",
      // controller: 'tabsCtrl'
    }
  }
})

我想你需要阅读一些文档。这是最后的result。

Ion-Tabs视图无法打开

1 个答案: