Question

我试图在一个非常简单的例子中使用ui.router，但无法弄清楚它为什么不起作用。

以下是代码：

<!doctype html>
<html ng-app="test">
    <head>
        <meta charset="utf-8">
        <title> ngTest </title>
    </head>
    <body>

        <a ui-sref="pages.home">Home</a>
        <div ui-view></div>

        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
        <script>
            var $app = angular.module('test', ['ui.router']);
            $app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
                $urlRouterProvider.otherwise('/');
                $stateProvider.state('pages', {
                    url: '/pages',
                    abstract: true
                });
                $stateProvider.state('pages.home', {
                    url: '/home',
                    template: '<h1> Hello </h1><p> {{ message }} </p>',
                    controller: function($scope){
                        $scope.message = 'Hey, It works !';
                    }
                });
            }]);
        </script>
    </body>
</html>

单击“主页”链接时，URL会更改，但视图不会显示！

提前感谢您的帮助：）

Answer 1

您需要稍微修改一下您的结构。如果你要使用像

这样的路线

$stateProvider.state('pages.home', {

然后你需要在该模板中特别指定ui-view以便渲染子项。所以它应该是这样的：

$stateProvider.state('pages', {
    url: '/pages',
    abstract: true,
    template: '<div ui-view></div>' //pages.home template will be nested into this template.
});

$stateProvider.state('pages.home', {
    url: '/home',
    template: '<h1> Hello </h1><p> {{ message }} </p>',
    controller: function($scope){
        $scope.message = 'Hey, It works !';
    }
});

试一试。欢呼声。

要了解更多信息，请访问：https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

Answer 2

只需从url更改为templateURL。并确保指定html的确切位置。

干杯。

简单的AngularJS和ui.router示例不起作用

2 个答案: