What to use exactly to navigate data between views

2019-09-10 02:48发布

站内问答 / 前端开发
1379 2 5

I've started developing a simple application :

my first ionic app

in the first view I'm retreiving all the games, and the other view i'm retreivig the game details according to the game id.

I didn't link the two pages yet.

this is what i'm facing as problem. i'm confused ! should I use ion-view ?? or I should use a normal page

for each view I have a controller which look almost like :

.controller('tomorrowmatches', function($scope, $http) {
    $http.get("http://www.myappbackend/ofc/matches?date=2015-05-03")
        .success(function (response) {
            $scope.matches = response;

            }

        });

})

and how to pass data from conroller to another, in my example I wanna pass the game.id as shwon on the screenshot.

if you need more details just let me know. I just need someone to make things clear for me, and if there is an example it would be fantastic.

2条回答
地球回转人心会变
2楼-- · 2019-09-10 03:24

First of all you need the ion view as a container for your views/templates.. 

<body ng-app="myapp">    
  <ion-nav-view></ion-nav-view>
</body>

then on your app.js you need to configure your routing..

// Ionic Starter App

angular.module('myapp', ['ionic', 'myapp.controllers', 'myapp.services', 'myapp.directives'])

.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) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

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

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  // $httpProvider.defaults.useXDomain = true;

  $stateProvider

  //Page1
  .state('page1', {
    url: "/page1",
    templateUrl: "templates/page1.html",
    controller: "Page1Controller"
  })

  //Page2
  .state('page2', {
    url: "/page2",
    templateUrl: "templates/page2.html",
    controller: "Page2Controller",
  })

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

});

Note: Make sure that all dependencies for ionic are included on your folder and called on your index.html..

Hope this helps :)

查看更多
0人赞 添加讨论(0) 举报
\"骚年 ilove
3楼-- · 2019-09-10 03:34

To pass data to another view you can use the $state and $stateParams services.

Example

Controller 1 (sends the data)

.controller('MyCtrl1', function($scope, $state) {
        $scope.selectedData = function(selectedId) {
            $state.go('yourState', { id: selectedId });
        };
    })

Controller 2 (gets the data)

.controller('YourCtrl', function($scope, $state, $stateParams) {
        if ($stateParams.id) {
            $scope.yourParam = $stateParams.id;
        }

        // Do anything you want with the ID inside $scope.yourParam
    })

app.js

.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('init', {
                url: "/init",
                templateUrl: "templates/init.html",
                controller: "MyCtrl1"
            })
            .state('yourState', {
                url: "/yourState?id",
                templateUrl: "templates/your-template.html",
                controller: "YourCtrl"
            })

        // if none of the above states are matched, use this as the fallback
        $urlRouterProvider.otherwise('/init');
    })

As you can see in the state yourState I assigned an id as a parameter. This parameter will be checked if exists by YourCtrl, if it exists assign to scope and then do whatever you want with it.

Remember to set the parameter options in your app.js route configuration.

Check the ui-router docs for more info on this. You have more ways to send data.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)