使用 ngRoute 移动到其他页面时，Angular 参数在 html 中是未知的

Question

我有显示菜肴列表的 Menu.html 页面。通过点击每道菜的图片，我想引导用户进入 discdetail.html 页面。但是在dishdetail.html中，角度参数是未知的。

菜单.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;
    });

Answer 1

这是因为在您的对象属性中，“_id”是私有属性 - 属性/变量前的下划线表示它是私有的，并且只有控制器/脚本才能看到它。

一种解决方法是将您的对象属性“_id”更改为“id”。