Ion-footer-bar on top of the ion-list?

Asked

Viewed 389 times

2

I’m creating an endless list on . I have a ion-footer-bar in the index and after that list bring all the information of Webservice in the last record the ion-footer-bar is on the record. I’m trying to use the $scope.$broadcast('scroll.resize');, but it’s not solving.

How to solve this ?

Empresasctrl.js 

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 align-title="left" 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>

html companies. 

<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>
angularjs apache-cordova ionic

1 answer

1

Problem solved, simpler than I thought, just added a class to the tag <ion-nav-view class="has-footer"> and worked perfectly.

Browser other questions tagged angularjs apache-cordova ionic

You are not signed in. Login or sign up in order to post.