Блог

Я использую ionic и пытаюсь создать приложение. Проблема, с которой я сталкиваюсь, заключается в том, что когда я перехожу в новое состояние, используя:

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

Он переходит к моему новому виду / шаблону, но также показывает предыдущий шаблон, по которому я перемещался поверх нового шаблона. Фотографии, прикрепленные для демонстрации проблемы.

Это мои маршруты

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

Просмотр одного

Просмотр двух

Есть идеи, почему это происходит?

Где вы вызываете «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');
    });
  

Почему бы не использовать $location.path ?

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

Где значение path — это значение URL вашего $stateProvider