Question

我正在使用ionic并尝试创建应用。我遇到的问题是当我导航到新状态时，使用：

.controller('appCtrl', function($scope, $state) {
    $scope.navigate = function(path) {
        $state.go(path);
    };
})

导航到我的新视图/模板，但也显示我从新模板上方导航的上一个模板。附上图片以证明问题。

Theese是我的路线

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('login', {
        url: '/login',
        templateUrl: 'views/auth/login.html',
        controller: 'loginCtrl'
    })

    .state('signup', {
        url: '/signup',
        templateUrl: 'views/auth/signup.html',
        controller: 'signupCtrl'
    });

    $urlRouterProvider.otherwise('/login');
});

控制器

.controller('appCtrl', function($scope, $state) {
    $scope.navigate = function(path) {
        $state.go(path);
    };
})

.controller('signupCtrl', function() {})
.controller('loginCtrl', function() {})

我的按钮调用新状态：

<button ng-click="navigate('signup')">let's sign up!</button>

View one

View two

为什么会发生这种情况？

Answer 1

你在哪里打电话给“appCtrl”？

如果“appCtrl”是主控件，则必须像这样更改stateprovider;

 .config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
         .state('app', {
            url: '/app',
            abstract: true,
            templateUrl: 'views/auth/master.html',
            controller: 'appCtrl'
        })
        .state('app.login', {
            url: '/login',
            templateUrl: 'views/auth/login.html',
            controller: 'loginCtrl'
        })

        .state('app.signup', {
            url: '/signup',
            templateUrl: 'views/auth/signup.html',
            controller: 'signupCtrl'
        });

        $urlRouterProvider.otherwise('/login');
    });

Answer 2

为什么不使用$location.path？

.controller('appCtrl', function($scope, $location) {
    $scope.navigate = function(path) {
        $location.path(path);
    };
})

路径的值是$stateProvider

的网址值

离子导航state.go显示以前的视图

2 个答案: