Question

我开始开发一个简单的应用程序：

my first ionic app

在第一个视图中我正在检索所有游戏，另一个视图我根据游戏ID重新调整游戏细节。

我还没有链接这两页。

这就是我面临的问题。我糊涂了！我应该使用离子视图??或者我应该使用普通页面

对于每个视图我都有一个看起来几乎像的控制器：

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

            }

        });

})

以及如何将数据从conroller传递到另一个，在我的例子中我想通过game.id作为屏幕上的shwon。

如果您需要更多详细信息，请告诉我们。我只需要有人为我说清楚，如果有一个例子就会很棒。

Answer 1

要将数据传递到另一个视图，您可以使用$ state和$ stateParams服务。

实施例

控制器1 （发送数据）

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

控制器2 （获取数据）

.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');
    })

正如您在状态yourState中看到的那样，我指定了id作为参数。如果YourCtrl存在，则检查此参数，如果它存在，则分配给范围，然后随意执行任何操作。

请记住在app.js路由配置中设置参数选项。

检查ui-router docs以获取更多相关信息。您有更多方法可以发送数据。

Answer 2

首先，您需要将离子视图作为视图/模板的容器。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group form-appointment-time">
  <label class="col-sm-2 control-label">Preferred Time:</label>
  <div class="col-sm-10">
    <div class="form-inline">
      <select class="form-control" name="form-hour">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
      </select>
      <select class="form-control" name="form-minute">
        <option value="00">00</option>
        <option value="30">30</option>
      </select>
      <input name="time_format" id="time-am" type="radio" value="AM">
      <label for="time-am">AM</label>
      <input name="time_format" id="time-pm" type="radio" value="PM">
      <label for="time-pm">PM</label>
    </div>
  </div>
</div>

<p class="result"></p>

然后在你的app.js上你需要配置路由..

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

注意：确保您的文件夹中包含离子的所有依赖项，并在index.html上调用..

希望这会有所帮助：）

什么用于在离子视图/控制器之间导航数据

2 个答案: