角度ui.router並鏈接到動態頁面

Question

我正在開發一個后端Rails應用程序，該應用程序生成和供前端離子應用程序使用的API。 我已經完成了大部分操作，並且正在構建ionic應用程序。 我有經驗的角度，但不是離子。

無論如何，我的問題是我有從API接收的資源。 它是靜態的，唯一可用的動作是index和show 。 我很好地接受了索引操作並可以列出它們，但是鏈接到show頁面會導致白屏。 我在angular 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'
      }
    }
  })

而且我已經嘗試完全遵循該規則，但還是沒有走運。

我有兩個問題。 第一個是如何鏈接以說出離子index操作中的show頁面。 第二個是，我可以在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'
      }
    }
  })

我的愚蠢語法錯誤