離子 - 幻燈片動畫不要在$ http請求上工作

我有一個從參數url加載數據的工廠。當我使用$http.get()離子不會運行幻燈片動畫（導航路由器），但如果我沒有$ http調用呼叫$state.change('newState')，動畫就完美了。

正如你可以在html代碼中看到的，我調用$scope.navigate()函數來裝載var的$scope.pageData數據，然後加載所有加載數據的視圖。

如果您認爲這不是最好的方法，請告訴我如何完成這項任務。

我的代碼：

var ayuda = angular.module('ayuda3cero', ['ionic'], function($interpolateProvider, $ionicConfigProvider){ 
    $interpolateProvider.startSymbol('<|'); 
    $interpolateProvider.endSymbol('|>'); 
    $ionicConfigProvider.views.transition('platform'); 
}) 

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

    $stateProvider.state('home', { 
    url: '/', 
    templateUrl: 'home.html' 
    }) 
    .state('ayudar', { 
    url: '/ayudar', 
    templateUrl: 'ayudar.html' 
    }) 
    .state('recibir', { 
    url: '/recibir', 
    templateUrl: 'recibir.html' 
    }) 
    .state('agradecimientos', { 
    url: '/agradecimientos', 
    templateUrl: 'agradecimientos.html' 
    }) 
}) 

.factory('dataLoader', function($http) { 
    return { 
     get: function(url){ 
      return $http.get(url); 
     }, 
     post: function(url){ 
      return $http.post(url); 
     } 
    } 
}) 

ayuda.controller('AyudaController', ['$scope', '$ionicSideMenuDelegate', '$state', '$ionicPopup', '$window', '$http', 'dataLoader', 
      function($scope, $ionicSideMenuDelegate, $state, $ionicPopup, $window, $http, dataLoader) { 

    $scope.pageData = {total_nece: $window.ayudas, total_ayuda: $window.ayudados}; 

    $scope.navigate = function(state, url){ 
    $http({method: "GET", url: url}).then(function(data){ 
     $scope.pageData = data.dataArray; 
     console.log($scope.pageDate); 

    }); 

    dataLoader.get(url).then(function(response){ 
     $scope.pageData = response.data.dataArray; 
     $state.go(state); 
    }); 
    }; 
}]);

編輯：

HTML代碼

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 

    <link href="{{ URL::asset('plugins/ionic-modal-animations/animate.min.css') }}" rel="stylesheet"> 
    <link href="{{ URL::asset('plugins/ionic-modal-animations/animate-styles.css') }}" rel="stylesheet"> 

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
    <link href="css/ionic.app.css" rel="stylesheet"> 
    --> 

    <script type="text/javascript"> 
     var inicioUrl = '{{ route('wInicio') }}'; 
     var ayudarUrl = '{{ route('wAyudar') }}'; 
     var recibirUrl = '{{ route('wRecibir') }}'; 
     var agradecimientosUrl = '{{ route('wListaAgradecimientos') }}'; 
     var publicUrl = '{{ url('/') }}'; 
    </script> 

    <!-- ionic/angularjs js --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 



    <!-- your app's js --> 
    <script src="js/app.js"></script> 

    <style> 
    @font-face { 
     font-family: BebasNeue; 
     src: url({{URL::asset('fonts/BebasNeue_Regular.otf')}}); 
     font-weight: normal; 
    } 
    body{ 
     font-family: 'Open Sans', sans-serif; 
    } 
    .scroll-content { 
     background: url({{URL::asset('images/fondo.png')}}); 

    } 
    .titular{ 
     font-size: 30px; 
    } 
    .container{ 
     background-color: transparent; 
    } 
    h1, h2, h3, h4, h5, h6, h5 span{ 
     font-family: BebasNeue; 
     text-align: center; 
    } 
    .textoAzul{ 
     color: #1e9dba; 
    } 
    .menu .scroll-content{ 
     background: #000; 
    } 

    #ayudaMenu .item, #ayudaMenu .item-complex .item-content, .item-radio .item-content{ 
     background: transparent; 
     color: white; 
     font-family: BebasNeue; 
     letter-spacing: 0.8px; 
    } 
    </style> 

    @yield('custom-css') 
    </head> 
    <body ng-app="ayuda3cero" ng-controller="AyudaController" style="background: #ffffff;"> 



    <ion-side-menus> 

     <ion-pane ion-side-menu-content> 
     <ion-nav-bar class="bar-dark"> 
      <ion-nav-buttons side="left"> 
      <button class="button" ng-click="toggleLeftSideMenu()"> 
       <i class="icon ion-navicon"></i> 
      </button> 
      </ion-nav-buttons> 
      <ion-nav-title> 
      <img src="{{URL::asset('images/cristo3cero.png')}}" style="height: 100%; width: auto;"> 
      </ion-nav-title> 
      <ion-nav-buttons side="right"> 
      <button class="button" ng-click="navigate('https://www.facebook.com/sharer/sharer.php?app_id=504928036346158&u={{urlencode(route(Request::route()->getName()))}}&redirect_uri={{urlencode(route(Request::route()->getName()))}}')" target="_blank"> 
       <i class="icon ion-social-facebook"></i> 
      </button> 
      <button class="button" ng-click="navigate('https://twitter.com/intent/tweet?url={{urlencode(route(Request::route()->getName()))}}&text={{urlencode("Ayuda 3.0 La primera WEBApp de ayuda al prójimo")}}&via=cristo3cero')"> 
       <i class="icon ion-social-twitter"></i> 
      </button> 
      </ion-nav-buttons> 
     </ion-nav-bar> 
     <ion-nav-view></ion-nav-view> 
     <script id="ayudar.html" type="text/ng-template"> 
     <ion-header-bar class="bar-dark bar bar-header"> 
     </ion-header-bar> 
     <ion-content> 
     <div class="padding"> 
      <div id="mapaPanel" class="padding" ng-show="geoAccepted"> 
      <div class="center"> 
      <img class="smallimg" ng-src="<|public|>/images/cristo3cero-necesitanayuda3cero.png" style="height: 100%; width: 90%; max-width: 400px;"> 
       </div> 
      <p class="font2" style="text-align: center;">El siguiente mapa muestra persnas cercanas a ti que necesitan ayuda</p> 
      <p class="font2" style="text-align: center;">Haz click en los iconos para ayudarles.</p> 
      <div id="map" style="border: 2px double black;height: 70vh;"></div> 
      </div> 

      <div id="listaPanel" class="padding" ng-hide="geoAccepted"> 
       <h1>Gente cercana a ti que necesita ayuda</h1> 
       <h2>Selecciona tu municipio y te mostraremos una lista de las personas que necesitan ayuda.</h2> 

       <div class="item item-input-inset"> 
       <label class="item-input-wrapper"> 
        <input type="text" name="Ciudad" id="Ciudad" placeholder="Nombre de la ciudad"> 
       </label> 
       <input type="submit" value="Buscar" ng-click="submitBuscar()" class="button button-small"> 
       </div> 

       <br/><br/> 
       <div class="cristoQuote padding"> 
       <i class="icon ion-quote textoAzul"></i><br/> 
       <p>Comienza a manifestarse la madurez cuando sentimos que nuestra preocupación es mayor por los demás que por nosotros.</p> 
       <br/> 
       <p style="text-align: right;" class="textoAzul">#cristo3cero</p> 
       </div> 
      </div> 
      </div> 
     </div> 
     </ion-content> 
    </script> 

     <ion-footer-bar align-title="left" class="bar-dark"> 
      <h1 class="title" style="text-align: center;">@yield('footerTitle')</h1> 
     </ion-footer-bar> 
     </ion-pane> 

     <ion-side-menu side="left"> 
     <header class="bar bar-header bar-dark"> 
      <h1 class="title">Menú</h1> 
     </header> 
     <ion-content class="has-header" id="ayudaMenu"> 
      <ion-list> 
      <ion-item nav-clear menu-close ng-click="navigate('home')"> 
       <i class="icon ion-home"></i> Inicio 
      </ion-item> 
      <ion-item nav-clear menu-close ng-click="navigate('ayudar')"> 
       <i class="icon ion-thumbsup"></i> Quiero ayudar 
      </ion-item> 
      <ion-item nav-clear menu-close ng-click="navigate('recibir')"> 
       <i class="icon ion-help-buoy"></i> Necesito Ayuda 
      </ion-item> 
      <ion-item nav-clear menu-close ng-click="navigate('agradecimientos')"> 
       <i class="icon ion-ribbon-a"></i> Agradecimientos 
      </ion-item> 
      </ion-list> 
     </ion-content> 
     </ion-side-menu> 

    </ion-side-menus> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBsevGsO0q45WgM6xhpYzCPhRgSm618COw"></script> 

    </body> 
</html>

正如你可以看到我有初始加載一些圖像和路線的HTML代碼中Laravel刀片代碼。我只把其中一個模板設置爲沒有設置這個代碼太長，這足以看到代碼。

來源

2016-04-14 Programador Adagal

工廠中的返回值不正確。

試試這個：

get: function(url){ 
    return $http.get; 
}

完美解決方案：

.factory('dataLoader', function($http, $q) { 
    return { 
     get: function(url){ 
      var deferred = $q.defer(); 
      $http.get(url) 
       .then(function(d) { 
        deferred.resolve(d.data); 
       }); 
      return deferred.promise; 
     }   
    } 
});

調用工廠方法：dataLoader.get（URL）。然後（...）;

來源

2016-04-14 11:58:44

非常感謝，您的代碼運行完美，但仍然是同樣的問題。如果我直接從'$ scope.navigate'執行'$ http.get（）...'，那麼運行完美，以及如果我從工廠執行。數據加載始終是完美的。問題是當我執行'$ state.go（）'時，視圖的滑動動畫。如果我完成了http調用，則不會播放動畫。 –

請附上您的html源碼。 –

查看編輯;） –

離子 - 幻燈片動畫不要在$ http請求上工作

回答

相關問題