角度 ui.router 和链接到动态页面答案

【问题标题】：angular ui.router and linking to dynamic pages角度 ui.router 和链接到动态页面
【发布时间】：2016-11-03 00:56:13
【问题描述】：

我正在开发一个后端 Rails 应用程序，该应用程序为前端 ionic 应用程序生成 API 以供使用。我已经完成了 rails 方面（大部分），并且正在构建 ionic 应用程序。我有使用角度但不是离子的经验。

无论如何，我的问题是我有一个从 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 个问题。第一个是我如何从 ionic 中的 index 动作链接到 show 页面。第二个是，我可以在 Ionic 中使用 $routeProvider 吗？我知道我应该可以，但我没有看到很多资源表明这一点，所以我不想仅仅因为我在链接页面时遇到问题而造成太多与此相关的开销。

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

【问题讨论】：

标签： javascript ruby-on-rails angularjs ionic-framework

【解决方案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'
      }
    }
  })

我的语法错误

【讨论】：