Question

我正在尝试将图像和文字放入视图中＃34; home＆＃34;在具有Angular ui-router和$stateParams的单页应用程序中。

'use strict';
angular.module('confusionApp')
.controller('IndexController', ['$scope', '$stateParams', 'menuFactory', 'corporateFactory', function($scope, $stateParams, menuFactory, corporateFactory) {

        var dish = menuFactory.getDish(parseInt($stateParams.id,10));
        $scope.dish = dish;

        var promo = menuFactory.getPromotion(parseInt($stateParams.id,10));
        $scope.promo = promo;

        $scope.leader = corporateFactory.getLeader($stateParams.abbr)

    }])

    .controller('AboutController', ['$scope', 'corporateFactory', function($scope, corporateFactory) {
        $scope.leaders = corporateFactory.getLeaders();

   }])

menuFactory服务在＆＃39; MenuController＆＃39;中工作正常。两者都有一个列表和一个参数（注入＃39;提交＆＃39;）。使用＆＃39; AboutController＆＃39;，corporateFactory在列表中正常工作。但是，当index.html打开视图＆＃39; home.html时，我无法找到如何注入$ stateParam。

   <div class="container" ng-controller="IndexController">
    <div class="row row-content">
        <div class="col-xs-12 col-sm-3 col-sm-push-9">
            <p style="padding:20px;"></p>
            <h3 align=center>Our Lipsmacking Culinary Creations</h3>
        </div>
        <div class="col-xs-12 col-sm-9 col-sm-pull-3">
            <h4>Implement the Featured Dish Here</h4>
            <div class="media">
                <div class="media-left media-middle">
                    <a>
                        <img class="media-object img-thumbnail"
                        ng-src={{dish.image}} alt={{dish.name}}>
                    </a>
                </div>
            </div>
            <div class="media-body">
                <h2 class="media-heading">{{dish.name}}
                    <span class="label label-danger">{{dish.label}}</span>
                    <span class="badge">{{dish.price | currency}}</span></h2>
                <p>{{dish.description}}</p>
            </div>
        </div>
    </div>

请问有人帮帮我吗？

Answer 1

请勿使用$ stateParams

注入$ state然后访问

 $state.params.wotever

Answer 2

感谢JB Nizet和danday74的宝贵帮助！问题是让模板知道要显示的菜肴的属性。我找到的答案是在controllers.js。首先，我必须更正错误，然后我创建了一个只包含所需菜肴的$ scope.property：

var up = menuFactory.detDish(0);
$scope.up = up;

然后我可以在模板中使用{{up.image}}，{{up.name}}等。

在哪里以及如何注入$ stateParams？

2 个答案: