angularjs问题与我的路由有多个视图

Question

我正在关注angular-phonecat教程并尝试以相同的方式构建内容。

在我的index.html文件中，我有一个场地和他们的图像列表，当我选择一个特定的场地时，我需要转移到另一个视图，并提供有关它的详细信息。但是，我在我的视图html文件中获得了相同的输出（就像这样。{strong>详细信息视图为{{venueId}} ，其中sceneid没有解析并仅显示为只有siteid）

的index.html

<ul>
  <li ng-repeat="venue in venues | filter: venue | orderBy: predicate" class="thumbnail">
    <div class="row">
      <div class="col-md-6">
        <a href="#/venue-details/{{venue.id}}"><img ng-src="{{venue.imageUrl}}"></a>
      </div>
      <div class="col-sm-3">
        <a href="#/venue-details/{{venue.id}}" class="thumb"> {{ venue.name }}</a>  
      </div>
  </li>
</div>
</ul>

config.router.js

app.run(['$rootScope', '$state', '$stateParams', 
  function ($rootScope, $state, $stateParams) {}])
  .config(['$stateProvider', '$urlRouterProvider', '$httpProvider', 
    function ($stateProvider, $urlRouterProvider, $httpProvider) {
      $stateProvider
        .state('search', {
          url: '/search',
          templateUrl: 'templates/search2.html'
        })
        .state('/venue-details/:venueId', {
          url: '/venue-details',
          templateUrl: 'templates/venue-details.html',
          controller: 'venueDetailCtrl'
        });
      }
  ]);

controller.js

app.controller('venueDetailCtrl', ['$scope', '$stateProvider',
  function($scope, $stateProvider) {
    $scope.venueId = $stateProvider.venueId;
  }
]);

场地details.html

detail view for <span>{{venueId}}</span>

Answer 1

 function($scope, $stateProvider) {
        $scope.venueId = $stateProvider.venueId;
      }]);

不是$ stateProvider：$ stateParams：）

这可能有问题

.state('/venue-details/:venueId', {
                            url: '/venue-details',
                            templateUrl: 'templates/venue-details.html',
                            controller: 'venueDetailCtrl'
                      })

它应该像

.state('venuedetail', {
      url: '/venue-details/:venueId',
      templateUrl: 'templates/venue-details.html',
      controller: 'venueDetailCtrl'
})

我认为州名有问题

Answer 2

Stackoverflow真的有助于像我这样的初学者。非常感谢你们的帮助。我把它修好了。我的id声明出错了。我在某处使用id而在某处使用Id所以我认为它创造了一个问题。实际上我尝试了在场地中的另一个绑定，例如venue.details等。一切正常，但不是Id，然后我想出来了。感谢帮助人员修复我的状态参数声明错误。这里有完整的工作代码

<强>的index.html

                     <div class="col-md-6">
                     <a href="#/search/{{venue.id}}"><img ng-src="{{venue.imageUrl}}"></a></div>
                     <div class="col-sm-3">
                     <a ui-sref="venuedetail({venueid:venue.id})" class="thumb"> {{ venue.name }}</a>  
                     </div>

<强> config.router.js

app.run(['$rootScope', '$state', '$stateParams', 
  function ($rootScope, $state, $stateParams) {}])
  .config(['$stateProvider', '$urlRouterProvider', '$httpProvider', 
    function ($stateProvider, $urlRouterProvider, $httpProvider) {
      $stateProvider
        .state('search', {
          url: '/search',
          templateUrl: 'templates/search2.html'
        })
        .state('/venue-details/:venueid', {
          url: '/venue-details',
          templateUrl: 'templates/venue-details.html',
          controller: 'venueDetailCtrl'
        });
      }
  ]);

<强> controller.js

app.controller('venueDetailCtrl', ['$scope', '$stateProvider',
  function($scope, $stateProvider) {
    $scope.venueid = $stateProvider.venueid;
  }
]);

<强>场地details.html

detail view for <span>{{venueId}}</span>