Question

我尝试在Angular-Seed（http://mobileangularui.com/）index-async.html中使用mobile-angular-ui（https://github.com/angular/angular-seed）侧边栏菜单。我按照描述 npm install 和 npm run update-index-async 来设置索引和索引异步页面。侧边栏正在处理索引，但不在index-async

中

补充工具栏菜单适用于index.html。

<!DOCTYPE html>
<!--[if lt IE 7]>
<html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My AngularJS App</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
    <link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-hover.css">
    <link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-base.css">
    <link rel="stylesheet" href="app.css">
    <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body ng-cloak ui-prevent-touchmove-defaults>
<!-- Sidebars -->
<div ng-include="'Shared/menu.html'" id="leftMenu" class="sidebar sidebar-left black-bg"></div>

<div class="app">
    <div class="navbar navbar-app navbar-absolute-top">
        <div class="btn-group pull-left">
            <a href ui-toggle="leftMenu" class="btn" id="btn-menu">
                <i class="fa fa-bars"></i> Menu
            </a>
        </div>
        <div class="navbar-brand navbar-brand-center" ui-yield-to="title">
            APP
            <small>v<span app-version></span></small>
        </div>
    </div>

    <!-- App body -->
    <div class="app-body scrollable">
        <div class="app-content scrollable-content">
            <ng-view></ng-view>
        </div>
    </div>
</div><!-- ~ .app -->

<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>

但侧边栏菜单不适用于index-async.html。我尝试了 npm run update-index-async 和npm install scriptjs。他们都没有工作。

这是我的索引异步代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
    <style>
        [ng-cloak] {
            display: none;
        }
    </style>
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
    <link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-hover.css">
    <link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-base.css">
    <link rel="stylesheet" href="app.css">
    <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
    <script src="bower_components/angular-loader/angular-loader.js"></script>
    <script src="bower_components/scriptjs/dist/script.js"></script>
    <script>
        // load all of the dependencies asynchronously.
        $script('bower_components/angular/angular.js', function () {
            $script([
                'bower_components/angular-route/angular-route.js',
                'bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.js',
                'app.js',
                'view1/view1.js',
                'view2/view2.js',
                'components/version/version.js',
                'components/version/version-directive.js',
                'components/version/interpolate-filter.js'
            ], function () {
                // when all is done, execute bootstrap angular application
                angular.bootstrap(document, ['myApp']);
            });
        })
    </script>
    <title>My AngularJS App</title>
    <link rel="stylesheet" href="app.css">
</head>
<body ng-cloak ui-prevent-touchmove-defaults>
<!-- Sidebars -->
<div ng-include="'Shared/menu.html'" id="leftMenu" class="sidebar sidebar-left black-bg"></div>

<div class="app">
    <div class="navbar navbar-app navbar-absolute-top">
        <div class="btn-group pull-left">
            <a href ui-toggle="leftMenu" class="btn" id="btn-menu">
                <i class="fa fa-bars"></i> Menu
            </a>
        </div>
        <div class="navbar-brand navbar-brand-center" ui-yield-to="title">
            APP
            <small>v<span app-version></span></small>
        </div>
    </div>

    <!-- App body -->
    <div class="app-body scrollable">
        <div class="app-content scrollable-content">
            <ng-view></ng-view>
        </div>
    </div>
</div><!-- ~ .app -->

<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>

</body>
</html>

移动角度ui侧边栏不能在异步中工作

0 个答案: