Angular 视图到 Ionic 视图

Question

我做错了什么？我遵循了无数关于 Youtube/Google 的教程，但它似乎没有用。

我想加载游戏，当你点击其中一个游戏时，它应该会显示 detail view。这一切仅在 Angular 中运行良好，但我想在 Ionic 中尝试 animation.

注：以下代码是显示游戏列表。

Index.html

  <body ng-app="myApp">
    <script id="list.html" type="text/ng-template">
      <ion-nav-view></ion-nav-view>
    </script>
  </body>

控制器

var ctrl = angular.module('Controllers', []);

ctrl.controller('MainController', ['$scope', '$http', '$location', 'games', function($scope, $http, $location, games){

  $scope.games = [];

  $scope.games = games.all();

}]);

你可以假设我在上面的代码中获取了数据。

应用配置

app.config(['$stateProvider',function($stateProvider) {
  $stateProvider
    .state('list', {
      url: "/",
      templateUrl: 'templates/list.html',
      controller: 'MainController'
    })
}])

List.html

<ion-view view-title="Games">
  <ion-refresher pulling-text="Refresh..." on-refresh="refresh()"></ion-refresher>

  <ion-content>
    <div class="game" ng-repeat="game in games.results" ng-click="checkDetail(game, $index)">
      <!--<img ng-src="{{ game.image.screen_url }}" alt="{{ game.aliases }}" />-->
      <h3>{{ game.name }}</h3>
    </div>
  </ion-content>
</ion-view>

Codepen

这是我根据 codepen http://codepen.io/darrenahunter/pen/oDKid

Answer 1

您必须声明一个 ui-view 以从状态注入模板。像这样编辑你的 index.html :

<body ng-app="myApp">
    <div ui-view>
    </div>
</body>

或

<body ng-app="myApp">
    <ion-nav-view name="content"></ion-nav-view>
</body>

然后像这样编辑你的状态

.state('statename', {
     url: "/",
     views: {
         'content': {
             templateUrl: 'yourTemplate.html',
             controller: "yourCtrl"
         }
     }
}

这样你就可以强制在那个 ion-nav-view 中注入你的视图。

创建方法与此相同

    <div ui-view="content"></div>

Angular 视图到 Ionic 视图

Angular view to Ionic view

angularjs

ionic

Index.html

控制器

应用配置

List.html

Codepen

或