ионная переопределяющая панель нижнего колонтитула в шаблоне

У меня есть нижний колонтитул, который я хочу добавить к большинству моих шаблонов, поэтому я добавил его в файл 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>

Проблема заключается в том, что в некоторых шаблонах я хочу, чтобы скрыть этот колонтитул, поэтому я попытался внутри шаблона, чтобы поставить пустой <ion-footer-bar></ion-footer-bar> после ионного содержания, но по-прежнему футер показывает.

Как скрыть или переопределить его в моем шаблоне?

Благодаря

источник

2016-01-20 Dany Y

Вы пробовали применять класс CSS к специфическому '<ионной сноски-бар>', который скрывает его (дисплей: нет; видимость: невидимой; высота: 0;)? – beaver

Я не могу этого сделать, потому что я не могу использовать нижний колонтитул изнутри шаблона через css –

ok, проверьте мой ответ ниже – beaver

Здесь ниже приведен пример, в котором вторая точка зрения (вкладка) не имеет ионного колонтитула-бар.

Я использовал $ stateChangeStart события, чтобы изменить свойство $scope.showFooter, к которому привязана видимости сноски (через нг-если).

Обработчик изменения состояния находится в качестве «mainCtrl» (а также свойства showFooter), который работает в качестве родительского контроллера всех других «видных» контроллеров.

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'); 
 
    
 
});

<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>

источник

2016-01-20 13:08:21 beaver

Но с этим кодом не будет отображаться нижний колонтитул при переходе на или с маршрута? –

ионная переопределяющая панель нижнего колонтитула в шаблоне

ответ

Смежные вопросы