ui-router ui-viewメインビューに基づいて情報を更新しない

Question

私はメインページに家のリストを表示しています。特定の家をクリックすると、その家の詳細を表示します。私はui-viewを使用してこれを達成しようとしていますが、家の詳細は表示されません。

これらは、定義された私のルートです：

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リピートまたは中カッコ内には何も表示されません。

更新されたhtml：

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

これは私のページの詳細コントローラです：

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); 
     }) 

    }]); 

私は細部の家のページのためだけでなく、工場を追加しました：

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" 
     }] 
    } 
} 

Answer 1

あなたのng-href="#/about/{{value.address}}"はあなたの状態宣言と一致しませんそれはurl: 'about/:item',

Answer 2

を与えます。あなたの詳細コントローラでは、あなたが使用している角度とUIルータのどのバージョンのサーバー

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

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

あなたのHTML内

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