Question

我的问题在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";
            }
        });
    });

无论显示哪个哈希，都会出现状态“first”。我以为我正在从一个例子中正确地复制语法，但我没有做对。

第一个视图有指令：

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？）也会为我输入的内容添加“/”。我从来没有展示过第一个视图以外的任何东西。

我需要一种方法让视图独一无二，但仍然以某种方式在网址上表达。如果我必须使用也可以的参数。我希望某些观点必须有参数。

Answer 1

我实际上非常接近正确答案。

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";
            }
        });
    });

让路由在AngularJS中使用哈希

1 个答案: