javascript - 具有动态 ID Angular 和 Rails 的嵌套 View

Question

嘿，我有 Angular 将报价列表渲染为资源。报价存储在 Rails 后端中。我现在想使用 Angular 渲染该特定报价资源的 show.html。

我无法获得解决该州的问题。我不确定我是否理解如何将 id 传递到状态。我需要帮助弄清楚如何获得 Angular 来呈现特定引用的标记为“fullquote”的 ui View 中的 show.html。这是我的代码。

Quotes.html

<div class="quotes col-xs-10 col-md-8" ng-controller="QuotesCtrl" >
    <div ng-repeat="quote in quotes">
      <a ng-click="showQuote(quote);">
        <span ng-if="quote.read == false"> *NEW*</span>
        <span>Quote id: {{quote.id}}</span>
        <span>Name: {{quote.name}}</span>
        <span>Email: {{quote.email}}</span>
        <span>City: {{quote.city}}</span>
        <span>Region: {{quote.region}}</span>
        <span>State: {{quote.state}}</span>
      </a>
      <div ng-show="quote.visible">
        <a ui-sref="quotes/{{quote.id}}"> View </a>
        <ui-view="fullquote"></ui-view="fullquote">
        <a ng-click="quotes.splice($index, 1)"> Delete </a>
        <div ng-if"">
          <span>  {{quote.question2 }}</span>
          <span>  {{quote.question3 }}</span>
          <span>  {{quote.question4 }}</span>
          <span>  {{quote.question5 }}</span>
          <span>  {{quote.question6 }}</span>
          <span>  {{quote.question7 }}</span>
          <span>  {{quote.question8 }}</span>
          <span>  {{quote.question9 }}</span>
          <span>  {{quote.question10 }}</span>
          <span>  {{quote.question11 }}</span>
          <span>  {{quote.question12 }}</span>
          <span>  {{quote.question13}}</span>
        </div>
      </div>
    </div>
  </div>

Quotes.js

app.factory('Quotes', ['$resource',function($resource){
 return $resource('/quotes.json', {},{
 query: { method: 'GET', isArray: true },
 create: { method: 'POST' }
 })
}]);

app.factory('Quote', ['$resource', function($resource){
 return $resource('/quotes/:id.json', {}, {
 show: { method: 'GET' },
 update: { method: 'PUT', params: {id: '@id'} },
 delete: { method: 'DELETE', params: {id: '@id'} }
 });
}]);
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
    .state('home', { url: '', templateUrl: 'static_pages/home.html'})
    .state('quotes', { url: '/quotes', abstract: false, views : { templateUrl: 'quotes.html', controller:   'QuotesCtrl'}})
    .state('quotes/:id',  { url: 'quotes/:id', view: { "fullquote": { templateUrl: 'show.html', controller:   'QuotesCtrl'}}})
    .state('quotes/:id.pdf', { url: 'quotes/:id.pdf', controller:   'QuotesCtrl'})
    .state('users', { url: '/users', templateUrl: 'users.html', controller:   'UsersCtrl'})
    .state('/users/:id', { url: 'users_show.html', controller: "UsersCtrl" });
    $urlRouterProvider.otherwise( function($injector, $location) {
        var $state = $injector.get("$state");
            $state.go("home");
    })
    $locationProvider.html5Mode({ enabled: true, requireBase: false });
});

app.controller("QuotesCtrl", ['$scope', '$state', '$http', 'Quotes', 'Quote', '$location',  function($scope, $state, $http, Quotes, Quote, $location ) {
    $scope.quotes = Quotes.query();
    $scope.quote = Quote.query();

    $scope.showQuote = function (quote) {
        quote.visible = !quote.visible;
    }
}]);

Answer 1

您应该考虑以下几件事:

1. 您的州命名不正确。我假设您正在尝试使用嵌套状态。在这种情况下，您需要 quotes.detail或类似的东西。另外，在状态下，您需要将对象命名为 views而不是view 。请引用UI.Router multiple views guide了解更多信息。

   .state('引号.detail', { url: '引号/:id', 观点:{ "fullquote": { templateUrl: 'show.html', Controller :'QuoteCtrl'} } })

2. 要将参数传递给状态，您需要更改对此的链接。如果您想了解有关将参数传递给 ui.router 状态的更多信息 - 请阅读 manual :

<a ui-sref="quotes.detail({{quote.id}})"> View </a>

如果你想有一个单独的 View ，你还需要有单独的 Controller 。我把它命名为QuoteController 。您可以获取ht :id通过注入(inject) $stateParams 从 URL在 Controller 中。有关将参数输入 Controller 的更多信息 - here :

//QuoteController
['$stateParams, Quote , function($stateParams, Quote) {
Quoute.get({id:$stateParams.id});
}]

我不确定这是否能完全解决您的问题，但它肯定会让您更接近解决问题。我希望我能有所帮助!