好的，我在控制器中有这个代码：
/* 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;
}]);
现在在该代码中，服务中的编码器如下：
/* 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;
});
}
};
});
最后在app.js中，我的路由是：
/* 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"
}
}
});
}]);
我使用angular-ui-router.js并且我有一个
<div class="bodyStuff" ui-view></div>
注入该ui-view的html页面就是这样：
<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>
内部细节是：
<h2>Hi, I'm the detail title...</h2>
<p>And this is what I'm all about!!!</p>
我的问题是：当我通过代码运行色域时，$ stateParams总是出现在UNDEFINED !!!
意思是，当我打电话给＆＃34;发现＆＃34;在服务中起作用，＆＃34; id＆＃34;论证永远不会填充。
作为参考，这里是我得到这个链接的链接......
我见过$ state.params和$ stateParams。但没有任何作用。
我做过一些研究并发现了这一点：Click to view Stackoverflow article
由于
更新：
以下是注入index.html上的ui-view的home.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>
答案 0 :(得分：1)
2015年8月8日更新
好的，在稍微调整一下后，我发现它确实无法从下面的例子开始工作。跳到最低点到TWEAKED UPDATE，看看方式真的很棒!!!! *
YAHOO！我找到了解决方案here ....看！
好的，这就是你如何修复它并让$ stateParams同时工作和$ state.params。
1st - 在您的APP.JS文件中，在路径功能（代码）中执行此操作
.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"
},
//Important $stateParams Gotcha
//
//In state controllers, the $stateParams object will only contain
//the params that were registered with that state. So you will not
//see params registered on other states, including ancestors.
//
//This is here to fix the problem...Instead, use a resolve statement in the parent route.
resolve: {
id: ['$stateParams', function ($stateParams) {
return $stateParams.id; //By putting this here... (STEP 1)
}]
}
}
})
然后跳到下一个.state：
第2步：
.state('home.detail', {
url: "/detail/:id",
templateUrl: 'templates/home-details.html',
controller: function ($stateParams) {
$stateParams.id; //And this down here...(MATCH TO WHAT YOU DID ABOVE. HERE!!!)
}
})
然后在点击您在MASTER页面中创建的LINK时运行代码：
下面...
<a ui-sref-active="selected" ui-sref="home.detail({id: show.id})">{{show.name}}</a>
结果是你得到了你在console.log中找到的答案，这里......
.state('home.detail', {
url: "/detail/:id",
templateUrl: 'templates/home-details.html',
controller: function ($stateParams) {
$stateParams.id; //id: "1", or "2" or "n"
}
})
WALA !!!有用。我会为所有人检查一下。
我需要大声说出我合并完成的两个链接：
1 - http://www.funnyant.com/angularjs-ui-router/ 2 - https://github.com/angular-ui/ui-router/wiki/URL-Routing#important-stateparams-gotcha
在那里，啊...我希望我能够帮助...谢谢， dhavalcengg 为您的见解和给我一个“启动”找到答案。
TWEAKED UPDATE：
1）好的，让我们举例说明app.js ......
/* global angular, homeDetailsController */
// 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"
},
//Important $stateParams Gotcha
//
//In state controllers, the $stateParams object will only contain
//the params that were registered with that state. So you will not
//see params registered on other states, including ancestors.
//
//This is here to fix the problem...Instead, use a resolve statement in the parent route.
resolve: {
id: ['$stateParams', function ($stateParams) {
return $stateParams.id; //By putting this here...
}]
}
}
})
.state('home.detail', {
cache: false,
url: "/detail/:id",
views: {
"details": {
templateUrl: 'templates/home-details.html',
controller: "homeDetailController"
}
}
})
.state('about', {
url: "/about",
views: {
"mainAbout": {
templateUrl: "templates/about.html"
}
}
});
}]);
console.log("Host name is: " + document.location.hostname);
if (document.location.hostname === "localhost") {
myApp.constant('URL', '/mywebsite/js/json/');
} else if (document.location.hostname === "mywebsite.net" || "www.mywebsite.net") {
myApp.constant('URL', '/js/json/');
} else {
myApp.constant('URL', '/mywebsite/js/json/');
}
//Registering the company for the key achievements
//This defines and initializes a value service called company and assigns it an
//object with some default values.
myApp.constant("companydetail", {
"data": {
"company": []
}
});
2）现在是CONTROLLERS.JS
/* 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', '$stateParams', 'homeDataService',
function ($scope, $stateParams, homeDataService) {
var ctrlHmDets = this;
ctrlHmDets.data = {};
ctrlHmDets.data.paramsId = $stateParams.id;
//Call the service
homeDataService.find($stateParams.id);
console.log("From stateParams.id: " + $stateParams.id);
//Set the selected value
$scope.selectedShow = ctrlHmDets.data.id = $stateParams.id;
console.log("SelectedVal: " + $scope.selectedShow);
}]);
//This is ABOUT
myApp.controller('aboutController', ['$scope', '$state', 'aboutDataService',
function (aboutDataService) {
var ctrlAbout = this;
ctrlAbout.content = [];
ctrlAbout.fetchHome = function () {
//General Data
aboutDataService.getAboutData().then(function (result) {
ctrlAbout.content = result.data.dets.basedata;
console.log("About: ", result.data.dets.basedata);
});
};
ctrlAbout.fetchAbout();
}]);
3）接下来是SERVICES.JS ......
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
/* 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;
});
}
};
});
myApp.factory('aboutDataService', function ($http, URL) {
var getAboutData = function () {
return $http.get(URL + 'general-junk.json')
.success(function (data) {
console.log("SUCCESS!");
console.log("The About Stuff: " + data);
return data;
})
.error(function (e) {
console.log("He\'s dead Jim!", e);
return e;
});
};
return {
getAboutData: getAboutData
};
});
5）现在是INDEX.HTML页面：
<!DOCTYPE html>
<html id="ng-app" lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>myWesite.net</title>
<!-- CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
<!-- <link href="css/style.min.css" rel="stylesheet" media="screen"> -->
<link href="css/style.css" rel="stylesheet" media="screen">
<link href="css/wp-custom.css" rel="stylesheet" type="text/css"/> <!-- This is my custome CSS leave it out -->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<base href="index.html">
<script src="js/jquery/jquery-1.10.2.min.js"></script>
<script src="js/angular/angular.js" type="text/javascript"></script>
<script src="js/angular/angular-ui-router.min.js" type="text/javascript"></script>
</head>
<body id="index">
<div class="container" ng-controller="homeController as ctrlHome">
<!-- Nav UI View -->
<nav id="mainbar" class="hidden-xs" ui-view="mainNav"></nav>
<!-- Nav UI View -->
<div id="wrap">
<!-- injected header content -->
<div id="header" ui-view="mainHeader"></div>
<!-- injected main content -->
<div id="bodyStuff" ui-view="mainContent"></div>
<!-- End of Injected Content-->
</div> <!-- wrap -->
<footer id="footer" ui-view="mainFooter"></footer>
</div> <!-- container -->
<!-- underscore -->
<script src="js/underscore.js/underscore.js" type="text/javascript"></script>
<!-- Scripts -->
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- Angular -->
<script src="js/angular/app.js" type="text/javascript"></script>
<script src="js/angular/controllers/controllers.js" type="text/javascript"></script>
<script src="js/angular/directives/directives.js" type="text/javascript"></script>
<script src="js/angular/services/data-service.js" type="text/javascript"></script>
</body>
</html>
6）现在让我们来看看HOME.HTML文件
<section id="homePage">
<!-- injected Header
<div id="header" ui-view="mainHeader"></div>-->
<!-- row -->
<div class="row">
<!-- 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>
<p>{{show.description1}}</p>
<p>{{show.description2}}</p>
<pre hidden="hidden">{{show | json}}</pre>
</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="details"></div>
<!-- End Detail View -->
</div>
</div>
</section>
7）最后是HOME-DETAILS.HTML文件......
<h3>{{shows[selectedShow - 1].detailtitle}}</h3>
<p>{{shows[selectedShow - 1].detailbody}}</p>
<pre hidden="hidden">{{selectedShow - 1 | json}}</pre>
结果是美不胜收。
这是对Craig Craig McKeachiein的Blog和Podcast上面引用的文章的增强。他值得赞扬，鼓励我。
这是我想要添加Angular的CreativeMarket上的模板。