UI路由器的用户界面视图基于主视图

Question

我有房子显示的列表的主网页，当我点击一个特定的房子里，我想显示的房子细节没有更新信息。我想实现这个使用界面视图但是，房子的细节没有显示。

这些都是我的路线定义：

var app = angular.module('app', ['ui.router']); 

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

    $urlRouterProvider.otherwise('/about'); 

    $stateProvider 

     .state('home', { 
      url: '/home', 
      templateUrl: 'app/views/partial-home.html' 
     }) 

     .state('about', { 
      url: '/about', 
      templateUrl: 'app/views/partial-about.html', 
      controller: 'inventoryCtrl'  
     }) 

     .state('about.item', { 
      url: '/:id', 
      templateUrl: 'app/views/partial-about-item.html', 
      controller: 'detailsCtrl' 
     });  
    }); 

这是我的主网页的HTML显示所有房屋的列表：

<div ng-repeat="value in all | filter: (!!locationFilter || undefined) && {type: locationFilter} | filter: priceFilter | filter: datesFilter | orderBy:sortProp"> 
        <ul> 
        <li><img src="app/images/{{value.image}}.jpg" alt="Smiley face" height="100" width="240"></li> 
        <li><strong>{{value.id}}</strong></li> 
        <li><strong>{{value.address}}</strong></li> 
        <li>city: {{value.city}}</li> 
        <li>postcode: {{value.postcode}}</li> 
        <li>price: £{{value.price}}</li> 
        <li>num_of_beds: {{value.num_of_beds}}</li> 
        <li>{{value.type}}</li> 
        <li>{{value.minutes}}</li> 
        <li>{{value.added}}</li> 
        </ul> 
        <a ng-href="#/about/{{value.address}}" class="btn btn-primary">View details</a> 
       </div> 
<div ui-view></div> 

这是我的房子细节html的显示房子的细节这是唯一显示在ng-repeat或大括号内没有任何静态文本

已更新html：

<div> 
<ul ng-repeat="item in singleHouse track by item.id"> 
<li>{{item.id}}</li> 
<li>{{item.desc}}</li> 
</ul> 
</div> 

这是我的网页信息控制：

app.factory('DetailsFactory', ['$http', '$stateParams', function($http, $stateParams) { 

     var urlBase = 'app/default/details.json'; 
    var factory = {}; 

    factory.getHouseDetails = function(id){ 
     return $http.get(urlBase + id); 
    } 
    return factory; 

}]); 

和详细信息页面的JSON：

{ 

    "detailsData":{ 

     "details": [ 
      { 
      "id": 1, 
      "desc": "Beautiful house blebel eble" 
     }, { 
      "id": 2, 
      "desc": "Beautiful house blebel eble" 
     }, { 
      "id": 3, 
      "desc": "Beautiful house blebel eble" 
     }, { 
      "id": 4, 
      "desc": "Beautiful house blebel eble" 
     }, { 
      "id": 5, 
      "desc": "Beautiful house blebel eble" 
     }, { 
      "id": 6, 
      "desc": "Beautiful house blebel eble" 
     }, { 
      "id": 7, 
      "desc": "Beautiful house blebel eble" 
     }, { 
      "id": 8, 
      "desc": "Beautiful house blebel eble" 
     }, { 
      "id": 9, 
      "desc": "Beautiful house blebel eble" 
     }, { 
      "id": 10, 
      "desc": "Beautiful house blebel eble" 
     }, { 
      "id": 11, 
      "desc": "Beautiful house blebel eble" 
     }, { 
      "id": 12, 
      "desc": "Beautiful house blebel eble" 
     }] 
    } 
} 

app.controller('detailsCtrl', ['$scope', 'DetailsFactory', '$stateParams', '$state', function($scope, DetailsFactory, $stateParams, $state) { 

     $scope.id = $stateParams.id; 

     DetailsFactory.getHouseDetails($stateParams.id).then(function(response){ 
      $scope.singleHouse = response.detailsData.details; 
      console.log($scope.singleHouse); 
     }) 

    }]); 

我对细节的房子页面添加工厂以及

Answer 1

您ng-href="#/about/{{value.address}}"不会与你的国家宣言匹配它应该是url: 'about/:item',

Answer 2

$stateParams.item只是给出id。在您的详细信息控制器，你应该从服务器获取

app.controller('detailsCtrl', ['$scope', 'InventoryFactory', '$stateParams', '$state', function($scope, InventoryFactory, $stateParams, $state) { 

    InventoryFactory.getHouseDetail($stateParams.item).then(function(response){ 
     $scope.singleHouse = response.data; 
    }) 
}]); 

房子的细节在你的HTML

您使用的是什么版本的角度和UI路由器的

<ul ng-repeat="item in singleHouse"> 
<li>{{item.id}}</li> 
<li>{{item.desc}}</li> 
</ul>