私はMenu.htmlページに料理のリストを表示しています。各料理の画像をクリックすると、ユーザーをdishdetail.htmlページに誘導します。しかし、dishdetail.htmlでは、角度パラメータは不明です。ngRouteを使用して他のページに移動すると、角度パラメータはhtmlで不明です
Menu.html:
<div class="tab-content">
<ul class="media-list tab-pane fade in active">
<li class="media" ng-repeat="dish in dishes| filter:filtText">
<div class="media-left media-middle">
<a href="#/menu/{{dish._id}}">
<img class="media-object img-thumbnail" ng-src={{dish.image}} alt="Uthapizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger label-xs">{{dish.label}}</span>
<span class="badge">{{dish.price|currency}}</span>
</h2>
<p ng-show="showDetails">{{dish.description}}</p>
</div>
</li>
</ul>
</div>
dishdetail.html:
<div class="row row-content" ng-controller="DishDetailController">
<div class="col-xs-12">
<div class="media-left media-middle">
<a href="#/menu/{{dish._id}}">
<img class="media-object img-thumbnail" ng-src={{dish.image}} alt="Uthapizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger label-xs">{{dish.label}}</span>
<span class="badge">{{dish.price|currency}}</span>
</h2>
<p>{{dish.description}}</p>
</div>
</div>
</div>
とapp.js:
'use strict'
angular.module('confusionApp', ['ngRoute'])
.config(['$routeProvider',function($routeProvider) {
$routeProvider
.when('/menu', { // route for the menu pag
templateUrl : 'menu.html', controller : 'MenuController'
})
.when('/menu/:id', { // route for the dish details pag
templateUrl : 'dishdetail.html', controller : 'dishDetailController'
})
.otherwise('/menu');
}]);
controllers.js:
angular.module('confusionApp')
.controller('DishDetailController', ['$scope', '$routeParams',
'menuFactory', function($scope, $routeParams, menuFactory) {
var dish= menuFactory.getDish(parseInt($routeParams.id,10));
$scope.dish = dish;
}]);
とservices.js:
'use strict'
angular.module('confusionApp')
.factory('menuFactory',function(){
var menufac = {};
var dishes=[
{
_id:0,
name:'Uthapizza',
image:'images/uthapizza.png',
category:'main',
label:'Hot',
price:'4.99',
description:'A unique combination of Indian Uthappam (pancake) and Italian pizza topped with cerignola olives, ripe vine charry tomatoes, vidalia onion, Guntour chillies.'
},
{
_id:1,
name:'Elaicheesecake',
image:'images/elaicheesecake.png',
category:'appetizer',
label:'New',
price:'4.99',
description:'A unique combination of Indian Uthappam (pancake) and Italian pizza topped with cerignola olives, ripe vine charry tomatoes, vidalia onion, Guntour chillies.'
}];
menufac.getDishes = function(){
return dishes;
};
menufac.getDish = function(index){
return dishes[index];
};
return menufac;
});
ファクトリメソッドで$ routeparamsを呼び出すのではなく、tryを呼び出してください。 var id = $ routeparams.id; var dish = menuFactory.getDish(id); –
@Tom Johnson getDish()メソッドに送信する前にIDを整数に変換する必要はありませんか? – sahar
私はそれを行う必要は一度もありませんでしたが、それを行う際に害を感じません - それはあなたが有用な場合は余分なエラー処理を与えるでしょう:) –