Ion-Tabs view does not open up

Question

I had to change my post. my problem is the following tabs view:

The JavaScript file belonging to it is the following:

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 () {

});

But when i call it using 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 happens. The View does not show up and i have no log output. so no error and no warning. I compared each line with the example tabs project here and for me it seems to be the exact same. So why isnt it working.

Here a Plunker

LeftyX · Accepted Answer

I've noticed one problem with your tabs and routes.

You have 3 tabs in your tabs directive:

the name you set there must be used for the specific ruote in the views object:

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

As you can see the second tab's name is tab-style.

Another thing you're missing is the abastract (base) style which loads the tabs template. You can find a sample here.

Why would you define your routes in another module? John Papa in his Angular Style Guide suggests to:

Define routes for views in the module where they exist. Each module should contain the routes for the views in the module.

But you seem you're separating the base state for the tabs in 2 different modules.

I can see you're using a menuContent. Normally you would do that when you have a side menu. Am I right? In case you want to mix sidemenus with tabs you might want to have a look at this plunker.

There are a few problems with your code. Scripts loaded twice (ionic.bundle.js) and some other css which cannot be found.

Your state app.foo is trying to load a controller which does not exist in that module (PolaEditController).

Params in your states is meaningless since it's never used:

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

Your abstract state for the tabs need to be loaded in a view since you're using a side menu:

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

I guess you need to read a little bit of documentation. This is the final result.

Ion-Tabs view does not open up

Answers (1)

Related Questions