ion-new-view在哪里开始寻找第一个状态?

时间:2016-07-18 09:02:44

标签: javascript angularjs ionic-framework angular-ui-router ionic-view

我似乎无法找到有关ion-nav-view如何加载其第一个模板的任何文档。任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:0)

默认是否意味着它会看到我的findEvents状态并首先加载该模板? @entre

app.js

private void SaveUserConfigButton_Click(object sender, EventArgs e)
    {
        var userConfig = new UserConfig();

        userConfig.RandomPopulation = (int)_probability;
        userConfig.Rule = _gameOfLife.NextGenerationRule.RuleName;
        userConfig.Speed = _timer.Interval;
        userConfig.UseBoundary = _gameOfLife.UseBoundary;
        SaveUserConfig(userConfig);
    }

    private void MainForm_Load(object sender, EventArgs e)
    {
        var userConfig = LoadUserConfig(_path);

        InputRandomPopulationNumbericUpDown.Value = userConfig.RandomPopulation;
        SelectRulesComboBox.SelectedItem = _rules[5];  // <-- here is the problem
        SpeedTrackBar.Value = userConfig.Speed;
        BoundaryCheckBox.Checked = userConfig.UseBoundary;
    }

的index.html:

angular.module('starter', ['ionic', 'starter.controllers',     'ionic.contrib.ui.tinderCards'])

.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 &&     window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
        // org.apache.cordova.statusbar required
        StatusBar.styleLightContent();
    }
});
})

.config(function ($stateProvider, $urlRouterProvider) {

$stateProvider

 .state('FindEvents', {
     url: 'index.html',
     templateUrl: 'templates/events.html',
     controller: 'EventsCtrl'
 }
 )

.state('favorites', {
    url: '/favorites',
    templateUrl: 'templates/favorites.html',
    controller: 'FavoritesCtrl'
})

//alert("working");
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/findEvents')

});

controllers.js:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>SlidingTransitionwithAPI</title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"> </script>
    <script src="cordova.js"></script>

    <script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="lib/angular-ui-router/release/angular-ui-router.min.js"></script>

    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>

    <script src="lib/ionic-ion-swipe-cards/ionic.swipecards.js"></script>

    <script src="lib/collide/collide.js"></script>
    <script src="lib/ionic-ion-tinder-cards/ionic.tdcards.js"></script>


</head>
<body ng-app="starter" no-scroll>
    <ion-nav-view>

    </ion-nav-view>
</body>
</html>

events.html:

angular.module('starter.controllers', [])

.directive('noScroll', function () {
return {
    restrict: 'A',
    link: function ($scope, $element, $attr) {
        $element.on('touchmove', function (e) {
            e.preventDefault();
        });
    }
}
})


.controller('EventsCtrl', function ($scope, $state) {
var cardTypes = [
    { image: './images/event1.jpeg', title: 'New Apple Release' },
    { image: './images/event2.jpeg', title: 'Digital Conference' },
    { image: './images/event3.jpg', title: 'Skyline Sessions' },
    { image: './images/event4.jpg', title: 'Secret Rooftop Party' },
    { image: './images/event5.jpeg', title: 'Smoking Lights' },
    { image: './images/event6.jpg', title: 'Antibes Color Run' },
    { image: './images/event7.jpg', title: 'Tomorrowland' },
    { image: './images/event8.jpeg', title: 'Steve Aoki Lighting Up Town' },
    { image: './images/event9.jpeg', title: 'Nice Yacht Party' },
    { image: './images/event10.jpg', title: 'Night Pool Party' },

];

$scope.cards = [];

$scope.addCard = function () {
    for (var p = 0; p < 10; p++) {

        var newCard = cardTypes[p];
        newCard.id = Math.random();
        $scope.cards.push(angular.extend({}, newCard));
    }
}

$scope.addCard();

$scope.cardDestroyed = function (index) {
    $scope.cards.splice(index, 1);
};

$scope.cardSwipedLeft = function (index) {
    console.log('Left swipe');
}

$scope.cardSwipedRight = function (index) {
    console.log('Right swipe');
}

$scope.cardDestroyed = function (index) {
    $scope.cards.splice(index, 1);
    console.log('Card removed');
}

//Transitioning between states
$scope.Favorites = function () {

    $state.go('favorites');
}
});

答案 1 :(得分:0)

您的app.js配置块应为:

$stateProvider

 .state('FindEvents', {
     url: 'findEvents',
     templateUrl: 'templates/events.html',
     controller: 'EventsCtrl'
 })

.state('favorites', {
    url: '/favorites',
    templateUrl: 'templates/favorites.html',
    controller: 'FavoritesCtrl'
})

//alert("working");
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/findEvents')
url州的{p> FindEvents应为findEvents,而不是index.htmlurl不是对任何html文件的引用,而是一个用于标识路径的字符串。

由于大量配置,要识别angular-ui-router的问题并不容易。您可以将此FAQ's suggestion用于任何未来相关问题。