Question

目前正在进行AngularJs项目

我有2个文件夹

一个是索引文件夹和页面，此文件夹有一个索引页面，包含4个菜单，

索引页面代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8"/>
        <title>Learn AngularJS - Inline Editor</title>

        <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" />

        <!-- The main CSS file -->
        <link href="style.css" rel="stylesheet" />

        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <!-- Notice the controller directive -->
    <body ng-app ng-controller="InlineEditorController">

        <!-- When this element is clicked, hide the tooltip -->
        <div id="main" ng-click="hideTooltip()">

            <!-- This is the tooltip. It is shown only when the showtooltip variable is truthful -->
            <div class="tooltip" ng-click="$event.stopPropagation()" ng-show="showtooltip">

                <!-- ng-model binds the contents of the text field with the "value" model.
                     Any changes to the text field will automatically update the value, and
                     all other bindings on the page that depend on it.  -->

                <input type="text" ng-model="value" />
            </div>

            <!-- Call a method defined in the InlineEditorController that toggles
             the showtooltip varaible -->
            <p ng-click="toggleTooltip($event)">{{value}}</p>

        </div>

        <!-- Include AngularJS from Google's CDN -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

4个菜单是家庭，项目等

如果我点击一个主菜单，则显示如下图像的一些内容：

enter image description here

如果我点击项目菜单，请参阅下面的图片

enter image description here

这两种方式都有助于仅显示内容（文本），但我想显示另一页（不是文本）

我有项目页面（html），如果我选择项目菜单，那么我想显示项目页面。

像索引页面一样就像一个母版页而其他页面是内容页面的方式？有可能在angularjs？

Answer 1

您可能希望查看此文档 - http://docs.angularjs.org/api/ngRoute.directive:ngView

这应该可以帮助你实现你想要做的事情。

另外，您可能需要遵循与ng-app相关的角度指南，例如

<div ng-app="myApp">
    <div ng-controller="MainCtrl">
        <!-- controller logic -->
    </div>
</div>

希望有所帮助。

Answer 2

您可能想查看angular-ui-router。与构建＆＃39; $ route＆＃39;相比，这是一个更复杂的模块。和＆＃39; ngView＆＃39;，但是当你将来必须创建更复杂的导航结构时（例如二级导航等），你会感激不尽。您可以从this教程开始，或直接跳到docs。

Angularjs菜单就像一个母版问题

2 个答案: