Ion-Tabs视图无法打开

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

我注意到一个问题，你的标签和路线。

您的标签指令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> 

设置必须有用于该意见的具体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（基础）样式。你可以找到一个样本here。

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

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

但是你似乎在分离两个不同模块中的选项卡的基本状态。我可以看到你正在使用menuContent。通常情况下，当你有一个侧面菜单时你会这么做。我对吗？ 如果你想混合sidemenus与标签，你可能想看看这个plunker。

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

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

PARAMS在你的国家是没有意义的，因为它从来没有使用过：

.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。