离子和角度的路由

时间:2015-08-27 23:54:06

标签: javascript angularjs routing ionic-framework

我正在尝试使用Angular,Meteorjs和Ionic Framework。由于尿液很容易:角度和尿液:离子包。不幸的是,我无法弄清楚如何配置离子链接和角度路由以使其工作。我尝试了html5Mode开/关,基础href,锚点等的不同组合,没有任何作用。每个建议如何解决它是受欢迎的?

app.js

angular.module('namo', ['angular-meteor', 'ui.router', 'ionic']);

function onReady() {
    angular.bootstrap(document, ['namo']);
}

if (Meteor.isCordova) {
    angular.element(document).on("deviceready", onReady);
}
else {
    angular.element(document).ready(onReady);
}

路由器

angular.module("namo").config(['$urlRouterProvider', '$stateProvider', '$locationProvider', '$ionicConfigProvider',
    function ($urlRouterProvider, $stateProvider, $locationProvider, $ionicConfigProvider) {

        $ionicConfigProvider.views.maxCache(0)
        $locationProvider.html5Mode(true);

        $stateProvider
            .state('home', {
                url: '/',
                views: {
                    'content' :{
                        templateUrl: "client/home/views/home.ng.html",
                        controller: 'HomeCtrl'
                    }
                }
            })
            .state('user.profile', {
                url: '/profile',
                views: {
                    'content' :{
                        templateUrl: 'client/user/views/profile.ng.html',
                        controller: 'ProfileCtrl'
                    }
                }
            });

        $urlRouterProvider.otherwise("/");
    }]);

和主要布局

<head>
    <base href="/">
</head>

<body>

    <ion-nav-view></ion-nav-view>
    <ion-side-menus enable-menu-with-back-views="false">
        <ion-side-menu side="left">
            <ion-header-bar class="bar-assertive">
                <h1 class="title">Menu</h1>
            </ion-header-bar>
            <ion-content>
                <ul class="list">
                    <a href="/" class="item" menu-close>Home</a>
                    <a href="/profile" class="item" menu-close>Profile</a>                   
                </ul>
            </ion-content>
        </ion-side-menu>

        <ion-side-menu-content>
            <ion-nav-bar class="bar-positive">
                <ion-nav-buttons side="left">
                    <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
                </ion-nav-buttons>
            </ion-nav-bar>
            <ion-nav-view name="content" animation="slide-left-right"></ion-nav-view>
        </ion-side-menu-content>

    </ion-side-menus>

</body>

控制器(主页和配置文件)包含简单的“hello home”和“hello profile”。不幸的是,只显示一条消息,并且在链接之间切换不会触发更多消息。

1 个答案:

答案 0 :(得分:0)

在路由器状态下尝试将您的观看名称从 内容 更改为

主页和个人资料并使用ui-sref代替href ui-sref="profile"