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

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

Answer 2

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

ui-router ui-view不根据主视图更新信息

2 个答案: