Question

我正在开发一个后端rails应用程序，它可以为前端离子应用程序生成和使用API。我有轨道（大部分）完成，并正在构建离子应用程序。我有使用角度的经验，但不是离子的。

无论如何，我的问题是我有一个我从API收到的资源。它是静态的，唯一可用的操作是index和show。我接受索引操作正常并可以列出它们，但链接到show页面会导致空白屏幕。我在角度显示控制器中调用了几个console.log来查看它是否正在运行，它是，但它没有链接到页面。这是设置：

app.js

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

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })

.state('app.search', {
    url: "/search",
    views: {
      'tab-search': {
        templateUrl: "templates/search.html"
      }
    }
  })

.state('app.gyms', {
    url: '/gyms',
    views: {
      'tab-gyms': {
        templateUrl: 'templates/gyms.html',
        controller: 'GymsIndexCtrl'
      }
    }
  })

  .state('app.gymShow', {
    url: "/gyms/:gymId",
    views: {
      'tab-gyms': {
        templates: "templates/gym.html",
        controller: 'GymsShowCtrl'
      }
    }
  })

  $urlRouterProvider.otherwise('/app/search');
})

控制器

angular.module('myApp.controllers', [])
.controller('GymsIndexCtrl', function($scope, $stateParams, Gyms) {
  $scope.gyms = Gyms.index(function(response) {
    console.log("from gyms");
    console.log(response);
  });
})

.controller('GymsShowCtrl', function($scope, $stateParams, Gyms) {
  $scope.gym = Gyms.query({id: $stateParams.id}, function(response) {
    // this is what's running, and it works
    console.log("running");
    console.log(response);
  });
})

gyms.html

<ion-view view-title="Gyms">
  <ion-content>
    <h1 class="text-center">Gyms</h1>
    <hr class="generic">
    <div ng-repeat="gym in gyms">
        <div class="list card">
              <div class="item item-avatar">
                <h2 class="pull-left"><b>{{gym.name}}</b></h2>
                <p class="pull-lefft">{{gym.description}}</p>
              </div>

              <div class="item item-image">
                <img src="{{gym.images}}" style="min-height: 200px;">
              </div>

          <!-- where the linking is. I have tried routes like this, and the
          ui.router syntax of ui-sref="app.gymShow({gymId: gym.id})"
          neither produce and error, but neither work -->

              <a class="item item-icon-left assertive" href="#/app/gyms/{{gym.id}}">
                <ion-icon name="person"></ion-icon>
                {{gym.reviews_count}} reviews
              </a>
            </div>
        </div>
  </ion-content>
</ion-view>

在离子支架示例中，它使用此

  .state('app.playlists', {
    url: "/playlists",
    views: {
      'tab-playlists': {
        templateUrl: "templates/playlists.html",
        controller: 'PlaylistsCtrl'
      }
    }
  })

  .state('app.single', {
    url: "/playlists/:playlistId",
    views: {
      'tab-playlists': {
        templateUrl: "templates/playlist.html",
        controller: 'PlaylistCtrl'
      }
    }
  })

我试图完全遵循这一点，但仍然没有运气。

我有2个问题。第一个是如何链接到离子中的show动作中的index个页面。第二个是，我可以在Ionic中使用$ routeProvider吗？我知道我应该可以，但是我没有看到很多资源显示，所以我不想因为我在链接页面时遇到问题而导致过多的开销。

非常感谢任何帮助我指出这些问题的正确方向。

Answer 1

所以这对我来说是非常愚蠢的。在本节中

.state('app.gymShow', {
    url: "/gyms/:gymId",
    views: {
      'tab-gyms': {
        templates: "templates/gym.html",
        controller: 'GymsShowCtrl'
      }
    }
  })

本来应该改成这个

.state('app.gyms', {
    url: '/gyms',
    views: {
      'tab-gyms': {
        templateUrl: 'templates/gyms.html',
        controller: 'GymsIndexCtrl'
      }
    }
  })

我最后的语法错误

angular ui.router并链接到动态页面

1 个答案: