[英]Getting routing to work with hashes in AngularJS
我的问题在http://nwlink.com/~geoffrey/routing/default.html上有一个部分有效的例子
var routingInterface = angular.module("routingInterface", ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state("first",
{
url: "",
template: '<h1>{{title}}</h1><timer-control action="second" wait="10" ></timer-control>' +
'<p>This page is supposed to change to another in ten seconds</p>',
controller: function($scope) {
$scope.title = "Welcome to Routing";
}
});
$stateProvider.state("second",
{
url: "",
template: '<h1>{{title}}<h2><p>This page is supposed to be displayed after the routing works</p>',
controller: function($scope) {
$scope.title = "Second page for routing";
}
});
});
无论显示哪个哈希,状态“第一”总是出现。 我以为我正在从一个例子中正确地复制语法,但我没有得到正确的答案。
第一个视图有一个指令:
routingController.directive('timerControl',
[
'$timeout', '$state', '$location',
function($timeout, $state, $location) {
return {
scope: {
action: "@",
wait: "@"
},
link: function($scope) {
if (!$scope.wait) {
$scope.wait = 30;
}
var tOut = $timeout(function() {
$timeout.cancel(tOut);
//this doesn't work:
// $location.hash($scope.action);
// does work but doesn't put a hash on the url
// like I expected
$state.go($scope.action);
},
Number($scope.wait) * 1000);
},
template: '<span class="ng-hide"></span>'
};
}
]);
这确实可以在url上添加一个新哈希来导航到新视图,但是它会添加第二个哈希标记。 但即使我在网址中正确输入它,某些东西(浏览器?或angularJS?)也会为我输入的内容添加“/”。 我从来没有展示过第一个视图以外的任何东西。
我需要一种方法让视图独一无二,但仍然以某种方式在网址上表达。 如果我必须使用也可以的参数。 我希望某些视图必须有参数。
我实际上非常接近正确的答案。
var routingInterface = angular.module("routingInterface", ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
//this was the first omission
//it allows the first page to render even without the hash
$urlRouterProvider.otherwise("first");
$stateProvider.state("first",
{
url: "/first", // this is what puts the hash on the Url
// and responds to the hash
template: '<h1>{{title}}</h1><timer-control action="second" wait="10" ></timer-control>' +
'<p>This page is supposed to change to another in ten seconds</p>',
controller: function ($scope) {
$scope.title = "Welcome to Routing";
}
});
$stateProvider.state("second",
{
url: "/second", //this is what puts the hash on the Url and
//and responds to the hash
template: '<h1>{{title}}</h1><p>This page is supposed to be displayed after the routing works</p>',
controller: function ($scope) {
$scope.title = "Second page for routing";
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.