UI-Router UI-View nicht aktualisieren Informationen basierend auf Hauptansicht

Question

Ich habe eine Hauptseite mit einer Liste von Häusern und wenn ich auf ein bestimmtes Haus klicken, möchte ich die Hausdetails anzeigen. Ich versuche das mit ui-view zu erreichen, aber die Hausdetails werden nicht angezeigt.

Diese sind meine Routen definiert:

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

das ist mein Haupt-Seite HTML-Liste aller Häuser Anzeige:

<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> 

dies mein Haus Details ist HTML, um das Haus Details anzuzeigen, die nur Anzeige des statischen Textes nichts in ng-repeat oder geschweiften Klammern wird angezeigt

aktualisiert html:

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

dies ist meine Seite Details Steuerung:

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; 

}]); 

und die json für die Seite Details:

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

    }]); 

Ich habe Fabrik als auch für die Details Haus-Seite hinzugefügt

{ 

    "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

Ihre ng-href="#/about/{{value.address}}" stimmt nicht mit Ihrer staatlichen Deklarationübereinsollte es sein url: 'about/:item',

Answer 2

$stateParams.item gibt nur id. In Ihren Daten-Controller sollten Sie das Haus Detail vom Server erhalten

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

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

in Ihrem html

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