在特定控制器中将按钮添加到离子页脚答案

【问题标题】：Add button to ionic footer in specific controller在特定控制器中将按钮添加到离子页脚
【发布时间】：2015-01-10 04:13:56
【问题描述】：

我想在我的许多控制器的离子页脚的两侧添加一些命令按钮。例如在 FirstController 我想要添加和编辑按钮，在 SecondController 我想要删除和发送按钮。

我将此添加到我的主布局中，但这是静态的：

<div class="bar bar-footer bar-balanced">
  <div class="title">My Program</div>
  <button class="button button-outline button-light" ng-click="add()"><i class="ion-arrow-left-c"></i></button>
  <button class="button button-outline button-light" ng-click="edit()"><i class="ion-arrow-right-c"></i></button>
</div>

请指导我如何在离子框架和角度中做到这一点。

感谢您的关注

【问题讨论】：

标签： html angularjs cordova ionic-framework

【解决方案1】：

只需将页眉和页脚添加到与控制器关联的视图中。在 home.html...

<ion-header-bar class="bar bar-subheader" >
<h1 class="left">Home</h1>
</ion-header-bar>

<ion-content>

<ion-list>
    etc...
</ion-list>

</ion-content>
<div class="bar bar-footer footer">

    Footer Content including buttons

</div>

在你的 index.html 中，你会有这样的东西：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
         ... etc ....
    </head>
    <body ng-app="myapp">
        <ion-pane ng-controller="HeaderController">    

            <ion-header-bar class="bar-stable">    

                header content    

            </ion-header-bar>    

            <ion-content>    

            <ion-nav-view>
            </ion-nav-view>    

            </ion-content>
        </ion-pane>
    </body>
</html>

当然，请务必配置您的路线。（这是 Ionic 应用程序的样板路由）。在 app.js....

app.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/')    

  $stateProvider.state('home', {
    url: '/',
    templateUrl: 'views/home.html',
    controller: 'HomeController'
  })    
})

控制器可以以正常方式定义，可能使用服务在控制器之间共享功能。

【讨论】：

【解决方案2】：

我的方法：

将添加和编辑按钮以及删除和发送按钮的代码移动到不同的服务 [第一个和第二个服务]。

创建一个中间人服务，包含对上面声明的两个服务的引用 [3rd Service]。

此服务将包含两个通用方法，即方法 1 和方法 2。

现在在您的控制器中，添加对第三个服务的引用。

yourApp.controller("myController", function(thirdService) {
    $scope.thirdService = thirdService;
    $scope.textForButton1 = "Text Based on Controller";
    $scope.textForButton2 = "Text Based on Controller";
});

现在，在您的 html 中：

<div class="bar bar-footer bar-balanced">
  <div class="title">My Program</div>
  <button class="button button-outline button-light" ng-click="thirdService.handleFirstButton()"><i class="ion-arrow-left-c">{{textForButton1}}</i></button>
  <button class="button button-outline button-light" ng-click="thirdService.handleSecondButton()"><i class="ion-arrow-right-c">{{textForButton2}}</i></button>
</div>

假设您的每个控制器都映射到不同路由中引用的页面，您可以根据路由决定调用哪个方法。

即在您的第三项服务中：

app.service('thirdService', function($http, $location, $state) {
    this.handleFirstButton = function() {
        switch ($state.current.name.toString().toLowerCase().trim()) {
        }
    };

    this.handleSecondButton = function() {
        switch ($state.current.name.toString().toLowerCase().trim()) {
        }
    };
});

【讨论】：