ion-footer-bar 保持在离子列表的顶部？

Question

我正在创建一个应用程序并添加了 ion-footer-bar，问题是 ion-footer-bar 停留在最后一条记录的 ion-list 之上。寻找我发现使用 $scope.$broadcast('scroll.resize'); 的任何解决方案，但它没有解决我的问题。

我该如何解决这个问题？

控制器

var app = angular.module('starter');

app.controller('EmpresaCtrl', function($scope, $state, $ionicLoading, EmpresaAPIService, AppConstants, APP_MESSAGES){

      $scope.moreData = false;
      var offset = 0;
    $scope.items = [];    

    $scope.loadMore = function(){
        EmpresaAPIService.getAllEmpresas(offset)
        .success(function(data){
        if(data.result.length === 0){
            $scope.moreData = true;            
        }else{            
            angular.forEach(data.result, function(empresa){                   
                var image = empresa.Empresa.imagem;
                empresa.Empresa.imagem = AppConstants.webServiceUrl + "/app/webroot/img/empresas/" + image;                 
                $scope.items.push(empresa);         
            })
            offset += 10;  
        }   

            $scope.$broadcast('scroll.infiniteScrollComplete');
        $scope.$broadcast('scroll.resize');

        })
      .error(function(err){
        $ionicLoading.show({ template: APP_MESSAGES.internetOut, noBackdrop: true, duration: 2000 });
      });   

    };

    $scope.getEmpresa = function(id){      
        var params = {id:id};
        $state.go('tab.detalheEmp', params);
    }

});

index.html

<body ng-app="starter" animation="slide-left-right-ios7">

    <ion-nav-bar class="bar bar-header bar-assertive" align-title="center">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>

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

    <ion-footer-bar class="bar-dark" ng-controller="AnuncioCtrl">
        <div ng-model="loading" ng-show="loading">
            <img src="img/loading.gif" width="30" height="30">            
        </div>
        <img ng-src="{{banner}}" style="max-width:100%;display:block;margin:0 auto">
    </ion-footer-bar>

  </body>

empresa.html

<ion-view view-title="Empresas">


  <ion-content class="padding" has-footer="true" scroll="true">

      <div class="item item-input-inset">
          <label class="item-input-wrapper">
            <i class="icon ion-ios-search placeholder-icon"></i>
            <input type="text" ng-model="pesquisar" placeholder="Pesquisa rápida...">
          </label> 
      </div>

      <ion-list>      
          <ion-item class="item item-thumbnail-left" 
                ng-repeat="item in items | filter:pesquisar" 
                type="item-text-wrap"
                ng-click="getEmpresa({{item.Empresa.id}})" >

              <img ng-src='{{item.Empresa.imagem}}'>          
              <div style="font-weight:bold;" class="item-text-wrap">{{item.Empresa.nome}}</div>
              <div style="font-size:small" class="item-text-wrap">{{item.Empresa.tipo}}</div>
              <div style="font-size:small">{{item.Empresa.endereco}}</div>
              <div style="font-size:small">{{item.Empresa.telefone}}</div>

              <a href="tel:{{item.Empresa.telefone}}" class="button button-small button-balanced icon ion-ios-telephone">
              </a> 

          </ion-item>
          <ion-infinite-scroll on-infinite="loadMore();" distance="1%" ng-if='!moreData'></ion-infinite-scroll>
     </ion-list>


  </ion-content>

</ion-view>

Answer 1

问题解决了。解决起来很简单。我在标签 <ion-nav-view class="has-footer"> 上添加 class 并且效果很好。

ion-footer-bar 保持在离子列表的顶部？

ion-footer-bar stay on top ion-list?

angularjs

ionic-framework

ionic