Я просмотрел эту документацию и на этом примере, но я не могу получить плавный переход в новый контент страницы (в настоящее время, когда я нажимаю свою кнопку, страница мигает и загружается в новом контенте, без анимации как видимой в примере).
Что я делаю не так?
Мой index.html
выглядит так
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Test</h1>
</ion-header-bar>
<ion-nav-view>
<ion-content padding="true">
...
</ion-content>
<ion-footer-bar>
<button class="bar bar-footer bar-calm button-large" ui-sref="quiz">
<p class="title">Start the quiz<p>
</button>
</ion-footer-bar>
</ion-nav-view>
</ion-pane>
app.js
выглядит так
var quizApp = angular.module('quizApp', ['ionic']);
quizApp.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});
quizApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('quiz', {
url: '/quiz',
views: {
'@': {
templateUrl: "templates/quiz.html",
controller: "quizController as quizCtrl"
}
}
});
$urlRouterProvider.otherwise("/");
});
quizApp.controller('quizController', ['$ionicPlatform', '$http', function($ionicPlatform, $http) {
this.blub = "test";
this.test = function(text) {
alert(text);
}
}]);
И quiz.html
выглядит так
<ion-view title="Home">
<ion-content padding="true">
<h2 style="font-size:50px;">{{quizCtrl.blub}}</h2>
</ion-content>
</ion-view>
Ладно, я понял. Единственная проблема заключалась в том, что я объявил $urlRouterProvider.otherwise("/");
но не определил state
для /
. Это отсутствующее state
разбило все приложение, но не выдало ошибку.
Возможно, попробуйте использовать что-то вроде:
<ion-nav-view animation="slide-left-right"></ion-nav-view>