2016-11-17 7 views
0

私は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; 
    }); 
+1

ファクトリメソッドで$ routeparamsを呼び出すのではなく、tryを呼び出してください。 var id = $ routeparams.id; var dish = menuFactory.getDish(id); –

+0

@Tom Johnson getDish()メソッドに送信する前にIDを整数に変換する必要はありませんか? – sahar

+0

私はそれを行う必要は一度もありませんでしたが、それを行う際に害を感じません - それはあなたが有用な場合は余分なエラー処理を与えるでしょう:) –

答えて

0

あなたのオブジェクトのプロパティで、「_id」は私有財産であるためです - プロパティ/変数の前にアンダースコアは、それがプライベートであり、唯一のコントローラ/スクリプトが見ることができるということを意味しそれ。

オブジェクトプロパティ "_id"を "id"に変更することがあります。

+0

私はこの問題に数日間関わっていました。私は 'var id = $ routeparams.id; var dish = menuFactory.getDish(parseInt(id、10)); ' 'id'を '_id'に変更します。しかし、問題は解決されていません。今日、私はこのコード行を変更するだけです: 'var dish = menuFactory.getDish(parseInt($ routeParams.id、10));'問題はそれだけで解決されました。最後に、問題の内容を理解できませんでしたか? – sahar

関連する問題