路由wierdness的角度与UI的路由 [英] Routing wierdness in angular with ui-routing
问题描述
另一个问题球员:)
如果我离开了templateUrl在我的路由空，范围可查询，但没有模板的表现。但是，如果我写它只是作为链接plunker项目，它使链接无法点击:(但只是为LI> a元素......也plunker我不能让它可行的，不知道为什么...任何人？
http://plnkr.co/edit/VKhhcSmepMTxBT7R5AuO
这里是ap.js本身帮助
（函数（）{
变种portApp = angular.module（'portApp'，['ui.router']）; portApp.config（函数（$ stateProvider，$ urlRouterProvider，$ locationProvider）{
$ urlRouterProvider.otherwise（'/家）;
$ stateProvider
.STATE（'根'，{
网址：'/家，
摘要：真实，
templateUrl：意见/ listView.html'，
控制器：'ListController
}）
.STATE（'家'，{
网址：'/家，
templateUrl：意见/ listView.html'，
控制器：'ListController
}）
.STATE（'约'，{
网址：'/约，
templateUrl：意见/ resumeView.html
}）
.STATE（'项目'，{
网址：'/项目/：itemLink'，
templateUrl：意见/ itemView.html'，
控制器：'ItemController
}）;
$ locationProvider.html5Mode（真）;
}）; portApp.factory（workFactory功能（）{
VAR作品= [
{
标题：雪碧
字幕：
链接：精灵，
缩略图：IMG / portfolio02.png
图片：IMG / ismont.png
}，
{
标题：百事，
字幕：Kristályvíz
链接：百事，
缩略图：IMG / portfolio03.png
图片：IMG / sanofimont.png
}
];
返回{
清单：功能（）{
返回作品;
}，
选择：功能（detPath）{
选择= works.filter（功能（工作）{
返回work.Link == detPath;
}）;
返回所选择的;
}
};
}）; portApp.controller（ListController，[$范围，workFactory
功能（$范围，workFactory）{
$ scope.allWorks = workFactory.list（）;
}
]）; portApp.controller（ItemController，[$范围，workFactory，$ stateParams
功能（$范围，workFactory，$ stateParams）{
VAR detPath = $ stateParams.itemLink;
//$scope.selectedWork = workFactory.selected（detPath）;
$ scope.selectedWork = workFactory.selected（detPath）[0];
警报（$ scope.selectedWork）;
}
]）;}）（）;
有
我不完全相信你想与你的根州做什么，所以我用它我的方式...
$ stateProvider
.STATE（'根'，{
摘要：真实，
模板：'＆LT;格UI视图=＆GT;＆LT; / DIV＆GT;，
解析：{
somedata：函数（）{返回{}}
}
}）
.STATE（'家'，{
父：'根'，
网址：'/家，
templateUrl：listView.html'，
控制器：'ListController
}）
.STATE（'约'，{
父：'根'，
网址：'/约，
templateUrl：resumeView.html
}）
.STATE（'项目'，{
父：'根'，
网址：'/项目/：itemLink'，
templateUrl：itemView.html'，
控制器：'ItemController
}）;
我们可以看到，超级父状态的 '根' 网址定义是没有，而且它确实包含模板的（其中所有的孩子都被注入）的
在另一方面，每一个国家现在宣布其母公司为根。这将意味着，所有国家都能够获得解决或任何其他常见的东西，后来应用到根。
简单的方法效果怎么样所有状态..希望这将有助于。也许这个检查的一些细节：角JS - UI路由器页面重载不会将
状态Another question guys :) If I leave the templateUrl empty in my routing, the scope is queriable but no template showing. But if I write it just as in the linked plunker project, it makes the links unclickable :( but just for the li > a elements... also in plunker I cannot make it workable, don't know why... anyone? http://plnkr.co/edit/VKhhcSmepMTxBT7R5AuO
And here is the ap.js itself for helping
(function(){
var portApp = angular.module('portApp', ['ui.router']);
portApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('root', {
url: '/home',
abstract: true,
templateUrl: 'views/listView.html',
controller: 'ListController'
})
.state('home', {
url: '/home',
templateUrl: 'views/listView.html',
controller: 'ListController'
})
.state('about', {
url: '/about',
templateUrl: 'views/resumeView.html'
})
.state('items', {
url: '/items/:itemLink',
templateUrl: 'views/itemView.html',
controller: 'ItemController'
});
$locationProvider.html5Mode(true);
});
portApp.factory("workFactory", function() {
var works = [
{
Title: "Sprite",
subTitle: "",
Link: "sprite",
Thumbnail: "img/portfolio02.png",
Image: "img/ismont.png"
},
{
Title: "Pepsi",
subTitle: "Kristályvíz",
Link: "pepsi",
Thumbnail: "img/portfolio03.png",
Image: "img/sanofimont.png"
}
];
return {
list: function() {
return works;
},
selected: function(detPath) {
selected = works.filter(function(work) {
return work.Link == detPath;
});
return selected;
}
};
});
portApp.controller("ListController", ["$scope", "workFactory",
function($scope, workFactory) {
$scope.allWorks = workFactory.list();
}
]);
portApp.controller("ItemController", ["$scope", "workFactory", "$stateParams",
function($scope, workFactory, $stateParams) {
var detPath = $stateParams.itemLink;
//$scope.selectedWork = workFactory.selected(detPath);
$scope.selectedWork = workFactory.selected(detPath)[0];
alert($scope.selectedWork);
}
]);
})();
There is an updated plunker
I am not fully sure what you want to do with your root state, so I used it the way I do...
$stateProvider
.state('root', {
abstract: true,
template: '<div ui-view=""></div>',
resolve: {
somedata: function(){return {}}
}
})
.state('home', {
parent: 'root',
url: '/home',
templateUrl: 'listView.html',
controller: 'ListController'
})
.state('about', {
parent: 'root',
url: '/about',
templateUrl: 'resumeView.html'
})
.state('items', {
parent: 'root',
url: '/items/:itemLink',
templateUrl: 'itemView.html',
controller: 'ItemController'
});
As we can see, super parent state 'root' is not having url defined, and it does contain template (where all children be injected)
On the other hand, every state now declares its parent as a 'root'. It will mean, that all states do have access to resolves or any other common stuff later applied to root.
Easy way how to effect all states.. Hope this could help. Maybe check this for some more details: Angular JS - UI router page reload won't set the state
这篇关于路由wierdness的角度与UI的路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
