如何在AngularJS的标题上放置按钮

Question

我的用户界面视图之前有一个标题区域。 我不想在每个模板文件中都包含标题。 如何使用指令或其他方法在页面顶部显示按钮？

该按钮取决于页面。

这里有一些例子：

我的主要index.html

<!DOCTYPE html>
<html ng-app="smarthome">
 <head>
  <script type="text/javascript" src="/lib/ionic/js/angular/angular.min.js"></script>
  <script type="text/javascript" src="/lib/ionic/js/angular-ui/angular-ui-router.min.js"></script>
  <script type="text/javascript" src="/js/main.js"></script>
 </head>
 <body>
    <section id="content">
        <div class="page-header row">
            <div class="col-sm-4">
                <a href="" ng-show="isBack()" ng-click="goBack()">
                    <i class="ion ion-arrow-left-c"></i>
                </a>
            </div>
            <div class="col-sm-4">
                <h1>blabla</h1>
            </div>
            <div class="col-sm-4">
                <!-- BUTTON HERE -->
            </div>
        </div>
        <div ui-view></div>
    </section>
 </body>
</html>

Answer 1

为什么不将控制器链接到标题并在标题的顶部div中使用ng-show？ 像这样：

 <body>
    <section id="content" ng-controller="headerCtrl">
        <div class="page-header row" ng-show="isVisible()>
            <div class="col-sm-4">
                <a href="" ng-show="isBack()" ng-click="goBack()">
                    <i class="ion ion-arrow-left-c"></i>
                </a>
            </div>
            <div class="col-sm-4">
                <h1>blabla</h1>
            </div>
            <div class="col-sm-4">
                <!-- BUTTON HERE -->
            </div>
        </div>
        <div ui-view></div>
    </section>
 </body>
</html>

Answer 2

我有类似的要求。 您可以通过添加ng-click中的按钮功能来添加该功能

angular.module('app', ['LocalStorageModule'])
     .run(['$rootScope', function ($rootScope) {  
               $rootScope.yourFunction = function () {
                   console.log("clicked here");
                }
    }]);

如何在AngularJS的标题上放置按钮

问题描述

2 个解决方案

解决方案1
0 2014-11-13 19:21:29

解决方案2
0 2017-01-13 16:38:32

如何在AngularJS的标题上放置按钮

问题描述

2 个解决方案

解决方案1 0 2014-11-13 19:21:29

解决方案2 0 2017-01-13 16:38:32

解决方案1
0 2014-11-13 19:21:29

解决方案2
0 2017-01-13 16:38:32