CODEWITHSUNDEEP
angularjsangular-ui-routerstatesingle-page-application
swissfritz
swissfritz

Reputation: 25

Where and how to inject $stateParams?

I am trying to get an image and a text into the view "home" in a Single Page Application with Angular ui-router and $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();

   }])

The menuFactory service works fine in a 'MenuController' both with a list and with a parameter (injection while 'submit'). The corporateFactory works fine in a list using the 'AboutController'. But I just can't find out how to inject the $stateParam while index.html opens with the view 'home.html.

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

Would anybody help me, please?

Upvotes: 0

Views: 1220

Answers (2)

swissfritz
swissfritz

Reputation: 25

Thanks for your precious help JB Nizet and danday74! The problem was to let the template know the properties of which dish to show. The answers I found were in controllers.js. First, I had to correct an error, and then I created a $scope.property containing only the required dish:

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

Then I could use {{up.image}}, {{up.name}} etc. in the template.

Upvotes: 0

danday74
danday74

Reputation: 57036

don't use $stateParams

inject $state instead and then access

 $state.params.wotever

Upvotes: 1

Related Questions