使用AngularJS单击菜单时是否可以弹出一个弹出窗口?

时间:2016-05-19 15:02:03

标签: javascript html css angularjs angular-ui-bootstrap

我实际上有这个菜单,我想在点击"仪表板"时添加弹出式身份验证。这个词......这可能吗?这是索引页面的代码,我不知道要改变什么......

<ng-include src="'views/layout/header.html'"></ng-include>

<nav id="headernav" class="navbar ng-hide" role="navigation" ng-show="getLayoutOption('layoutHorizontal') && !layoutLoading">
    <div class="nav">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <i class="fa fa-reorder"></i>
        </button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse" ng-class="{'large-icons-nav': getLayoutOption('layoutHorizontalLargeIcons')}" id="horizontal-navbar">
          <ul ng-controller="NavigationController" id="top-nav" class="nav navbar-nav">
              <li ng-repeat="item in menu"
                  ng-if="!item.hideOnHorizontal"
                  ng-class="{ hasChild: (item.children!==undefined),
                                active: item.selected,
                                  open: (item.children!==undefined) && item.open,
                       'nav-separator': item.separator==true }"
                  ng-include="'templates/nav_renderer_horizontal.html'"
                ></li>
          </ul>
    </div>
</nav>

<div id="wrapper">
    <div id="layout-static">
        <div class="static-sidebar-wrapper" ng-show="!layoutLoading">
            <nav class="static-sidebar" role="navigation">
                <ul ng-controller="NavigationController" id="sidebar" sticky-scroll="50">
                  <li id="search" ng-cloak>
                    <a href="">
                        <i class="fa fa-binoculars opacity-control"></i>
                    </a>
                    <form
                    ng-click="$event.stopPropagation()"
                    ng-submit="goToSearch()">
                        <input type="text" ng-model="searchQuery" class="search-query" placeholder="Type to filter..." />
                        <button type="submit" ng-click="goToSearch()"><i class="fa fa-binoculars"></i></button>
                    </form>
                  </li>
                  <li ng-repeat="item in menu"
                      ng-class="{ hasChild: (item.children!==undefined),
                                    active: item.selected,
                                      open: (item.children!==undefined) && item.open,
                           'nav-separator': item.separator==true,
                            'search-focus': (searchQuery.length>0 && item.selected) }" 
                        ng-show="!(searchQuery.length && !item.selected)"
                      ng-include="'templates/nav_renderer.html'"


                    ></li>
                </ul>
            </nav> <!-- #sidebar-->
        </div>
        <div class="static-content-wrapper">
            <div class="static-content">
                <div id="wrap" ng-view="" class="mainview-animation animated">
                </div> <!--wrap -->
            </div>
            <footer role="contentinfo" ng-show="!layoutLoading" ng-cloak>
                <div class="clearfix">
                    <ul class="list-unstyled list-inline pull-left">
                        <li></li>
                    </ul>
                    <button class="pull-right btn btn-default btn-sm hidden-print" back-to-top style="padding: 1px 10px;"><i class="fa fa-angle-up"></i></button>
                </div>
            </footer>
        </div>
    </div>
</div>

Here is a Picture

1 个答案:

答案 0 :(得分:1)

Here是AngularJS中对话的演示。

我认为,自定义对话框是您搜索的内容。