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。