Question

我正在学习Angular JS，在使用ui-view时我遇到了困难。我不知道ui-view或其他什么是麻烦。但我的导航栏没有出现。任何帮助都必须很棒！

的index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
    <script src="app.js"></script>
</head>

<body ng-app="myApp">
    <!-- NAVIGATION -->
    <div ui-view="navbar"></div>

    <!-- MAIN CONTENT -->
    <div class="container">
        <div ui-view="content"></div>
    </div>

</body>
</html>

app.js

(function() {
    'use strict';

    angular
        .module('myApp', ['ui.router'])
        .config(stateConfig);

    stateConfig.$inject = ['$stateProvider'];

    function stateConfig($stateProvider) {
        $stateProvider.state('app', {
            abstract: true,
            views: {
                'navbar@': {
                    templateUrl: 'navbar.html',
                    controller: 'NavbarController',
                    controllerAs: 'vm'
                }
            }
        });
    }
})();

navbar.html

<nav class="navbar navbar-inverse" role="navigation">
    <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="about">About</a></li>
    </ul>
</nav>

请帮助！

Answer 1

由于Claies指出你需要有后代状态，所以只激活你的父抽象状态。请检查答案here

在运行配置中，您必须通过调用$state.go('your.state.name')来初始化/激活根URL，或者必须使用ng-route的otherwise api来激活初始状态。在这里，我使用了index.html

中内容的未命名视图

我的ui-view没有用？

1 个答案: