Question

我想要添加到大部分模板中的页脚栏，因此我将其添加到SQL> recover database until cancel using backup controlfile; ORA-00279: change 6846169 generated at 01/20/2016 16:00:29 needed for thread 1 ORA-00289: suggestion : +DATA ORA-00280: change 6846169 for thread 1 is in sequence #521 Specify log: {<RET>=suggested | filename | AUTO | CANCEL} cancel Media recovery cancelled. SQL> alter database open resetlogs; Database altered.文件中。

index.html

问题是在某些模板中我想隐藏这个页脚，所以我在模板内部尝试在离子内容之后放置一个空的<ion-nav-view ></ion-nav-view> <ion-footer-bar align-title="left" class="bar-assertive"> <div class="buttons"> <button class="button">Left Button</button> </div> <h1 class="title">Title!</h1> <div class="buttons" ng-click="doSomething()"> <button class="button">Right Button</button> </div> </ion-footer-bar>，但页脚仍在显示。

如何在模板中隐藏或覆盖它？

由于

Answer 1

下面是第二个视图（标签）没有离子 - 页脚 - 条的示例。

我已使用 $ stateChangeStart 事件更改了绑定页脚可见性的属性$scope.showFooter（通过ng-if）。

状态更改处理程序位于＆＃39; mainCtrl＆＃39; （以及showFooter属性）作为所有其他＆＃34; view＆＃34;的父控制器。控制器。

＆＃13;

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })
    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "templates/home.html",
          controller: 'HomeCtrl'
        }
      }
    })
    .state('tabs.map', {
      url: "/map",
      views: {
        'map-tab': {
          templateUrl: "templates/map.html",
          controller: 'MapCtrl'
        }
      }
    });

   $urlRouterProvider.otherwise("/tab/home");

})

.controller('mainCtrl', function($scope, $state, $rootScope) {
  console.log('mainCtrl');
  $scope.showFooter = true;
  
  $rootScope.$on('$stateChangeStart', 
  function(event, toState, toParams, fromState, fromParams){
     console.log('>'+toState.name);
     if (toState.name=="tabs.home") $scope.showFooter = false;
     else $scope.showFooter = true;
  });
})

.controller('HomeCtrl', function($scope, $state, $ionicPopover) {
  console.log('HomeCtrl');
    
})

.controller('MapCtrl', function($scope, $state, $ionicPopover) {
  console.log('MapCtrl');
    
});

＆＃13;

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Tabs Example</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body ng-controller="mainCtrl">

  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button>
    </ion-nav-back-button>
  </ion-nav-bar>

  <ion-nav-view>
     <ion-footer-bar align-title="left" class="bar-assertive" ng-if="showFooter">
       <div class="buttons">
         <button class="button">AAA</button>
       </div>
       <h1 class="title">Title!</h1>
       <div class="buttons" ng-click="doSomething()">
         <button class="button">Right Button</button>
       </div>
     </ion-footer-bar>
   </ion-nav-view>
  

  <script id="templates/tabs.html" type="text/ng-template">
    <ion-tabs class="tabs-top tabs-icon-top tabs-positive">

      <ion-tab title="Home" icon="ion-home" href="#/tab/home">
        <ion-nav-view name="home-tab"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Map" icon="ion-ios-world" ui-sref="tabs.map">
        <ion-nav-view name="map-tab"></ion-nav-view>
      </ion-tab>

    </ion-tabs>
  </script>

  <script id="templates/home.html" type="text/ng-template">
    <ion-view view-title="Home" cache-view="false" >
      <ion-nav-buttons side="right">
        <button class="button button-icon ion-more" ng-click="popover.show($event)"></button>
      </ion-nav-buttons>
      <ion-content class="padding" ng-class="{'has-footer': showFooter}">
        <p>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/map">Go to Map</a>
        </p>
        <pre>showFooter = {{showFooter}}</pre>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/map.html" type="text/ng-template">
    <ion-view title="" cache-view="false" >
      <ion-nav-buttons side="left">
        <input id="places" class="controls" type="text" autocomplete placeholder="Enter a location" />
      </ion-nav-buttons>
      <ion-nav-buttons side="right">
        <button class="button button-icon ion-more" ng-click="popover.show($event)"></button>
      </ion-nav-buttons>

      <ion-content ng-class="{'has-footer': showFooter}">
        <div id="map" data-tap-disabled="true" style="width: 500px;height: 500px"></div>
        <pre>showFooter = {{showFooter}}</pre>
      </ion-content>
    </ion-view>
  </script>
  
</body>

</html>

＆＃13;

模板中的离子覆盖页脚栏

1 个答案: