OK, I have this code in a controller:
/* global myApp, ctrlRes */
'use strict';
myApp.controller('homeController',
['$scope','$state','homeDataService','companydetail',
function ($scope, $state, homeDataService,companydetail) {
var ctrlHome = this;
ctrlHome.data = [];
companydetail = [];
ctrlHome.fetchHome = function () {
//General Data
homeDataService.getHomeData().then(function (result) {
ctrlHome.data.push(result.data.basedata.companyinfo);
companydetail.push(ctrlHome.data);
//We get list of whatever....
$scope.shows = homeDataService.list();
console.log("General: ", result.data.basedata);
});
};
ctrlHome.fetchHome();
//Redirects to a page sent into this function
$scope.redirectToPage = function (pageToGoTo) {
//if pageToGoTo = home, then route to /home!
$state.go(pageToGoTo);
};
}]);
//This is the details for HOME
myApp.controller('homeDetailController',
['$scope','$state','$stateParams', 'homeDataService',
function($scope,$state,$stateParams, homeDataService) {
var ctrlHmDets = this;
ctrlHmDets.data = {};
console.log("State Params: ", $state.params);
//This is the part when the user selects a specifc itam
$scope.selectedShow = homeDataService.find($stateParams.id);
console.log("SelectedVal: " + $scope.selectedShow);
ctrlHmDets.data.id = $scope.selectedShow;
}]);
Now in that code, the coder in the service is below:
/* global myApp, _ */
var shows = [];
myApp.factory('homeDataService', function ($http, URL) {
//Details for the Home Page
shows = [{
id: 1,
title: 'Details 1',
name: 'Home Details',
description1: 'This is the detail content',
description2: 'Description content for home details',
detailtitle: 'This is the title for home 1',
detailbody: 'This is detail for home 1'
},{
id: 2,
title: 'Details 2',
name: 'Home Details 2',
description1: 'This is the detail content 2',
description2: 'Description content for home details 2',
detailtitle: 'This is the title for home 2',
detailbody: 'This is detail for home 3'
},{
id: 3,
title: 'Details 3',
name: 'Home Details 3',
description1: 'This is the detail content 3',
description2: 'Description content for home details 3',
detailtitle: 'This is the title for home 3',
detailbody: 'This is detail for home 3'
},{
id: 4,
title: 'Details 4',
name: 'Home Details 4',
description1: 'This is the detail content 4',
description2: 'Description content for home details 4',
detailtitle: 'This is the title for home 4',
detailbody: 'This is detail for home 4'
}];
var getHomeData = function () {
return $http.get(URL + 'general-junk.json')
.success(function (data) {
console.log("SUCCESS!");
console.log("The General Junk Home: " + data.basedata.companyinfo);
return data.basedata.companyinfo;
})
.error(function (e) {
console.log("He\'s dead Jim!", e);
return e;
});
};
return {
getHomeData: getHomeData,
list: function () {
return shows;
}, //This is for DETAILs if we should have them
find: function (id) {
return _.find(shows, function (show) {
return show.id === id;
});
}
};
});
And finally in the app.js, my routing is thus:
/* global angular */
// Code goes here
var myApp;
myApp = angular.module("myApp", [
"ui.router"
]);
myApp.config(function ($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist(['self', '**']);
});
myApp.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("home");
$stateProvider
.state('home', {
url: "/home",
views: {
"mainHeader": {
templateUrl: "templates/mainHeader.html"
},
"mainNav": {
templateUrl: "templates/mainNav.html"
},
"mainContent": {
templateUrl: "templates/home.html"
},
"mainFooter": {
templateUrl: "templates/mainFooter.html"
}
}
})
//When we define a state as 'parentstatename.childstatename' the convention
//of simply adding the period when defining the state name tells UI-Router
//that the child state is nested under the parent state.
//What is really great about nested views is that the list controller just
//has implementation details regarding the list and the detail controller
//is only concerned with showing details.
//To show how decoupled these are we only need to change the routing
//configuration to not nest the details and we have two separate virtual
//pages (one for list and one for details). More specifically, we’ll
//change the state name 'shows.detail' to 'detail'.
/*.state('detail', {
* url: "/detail/:id",
* templateUrl: 'templates/home-details.html'
*
*})
*
* And change the link to the state from
*
* <a ui-sref="shows.detail({id: show.id})">{{show.name}}</a>
* to
* <a ui-sref="detail({id: show.id})">{{show.name}}</a>
* on the home-details.html page or whatever page you have that
* link on.
*/
.state('home.detail', {
url: "/detail/:id",
templateUrl: 'templates/home-details.html',
controller: function($stateParams) {
$stateParams.id;
}
})
.state('about', {
url: "/about",
views: {
"mainAbout": {
templateUrl: "templates/about.html"
}
}
});
}]);
I'm using angular-ui-router.js and I have a
<div class="bodyStuff" ui-view></div>
The html page injected into that ui-view is simply this:
<h3>Hello World</h3>
<p>Some Text goes here</p>
<p><a ui-sref-active="selected" ui-sref="home.detail({id: show.id})">{{show.name}}</a>
<div class="detail" ui-view></div>
The interior DETAILS is this:
<h2>Hi, I'm the detail title...</h2>
<p>And this is what I'm all about!!!</p>
My question is: When I run the gamut through the code, $stateParams ALWAYS comes up UNDEFINED!!!
Meaning, when I call the "find" function in the service, the "id" argument is NEVER populated.
For reference, here's the link to where I got this...
I've seen $state.params and $stateParams. But nothing works.
I've done some research and found this too: Click to view Stackoverflow article
Thanks
UPDATE:
Below is the home.html that is injected into the ui-view on index.html
<section id="homePage">
<!-- injected Header
<div id="header" ui-view="mainHeader"></div>-->
<!-- row -->
<div class="row" ng-controller="homeDetailController as ctrlHmDets">
<!-- Angular Repeat... -->
<div class="col-lg-3 col-sm-6" ng-repeat="show in shows">
<div class="feature-widget">
<article class="home-features-item hover">
<div class="item-icon">
<i class="fa fa-html5"></i>
</div>
<div class="item-content">
<h3>{{show.title}}</h3>
<a ui-sref-active="selected" ui-sref="home.detail({id: show.id})">{{show.name}}</a>
<pre hidden="hidden">{{show | json}}</pre>
<p>{{show.description1}}</p>
<p>{{show.description2}}</p>
</div>
</article> <!-- home-features-item -->
</div> <!-- feature-widget -->
</div>
<!-- End Repeat -->
<div class="col-lg-12 col-sm-6">
<!-- Detail View -->
<div class="detail" ui-view></div>
<!-- End Detail View -->
</div>
</div>
