What to use exactly to navigate data between views/controllers in ionic

问题

I've started developing a simple application :

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.

回答1:

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.

回答2:

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 :)

来源：https://stackoverflow.com/questions/30509046/what-to-use-exactly-to-navigate-data-between-views-controllers-in-ionic

标签

angularjs

views

ionic-framework