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-repeat или фигурных скобок

обновленный 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: '/:item', это должно быть 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

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