İyonik - Slayt animasyonu $ http isteği üzerinde çalışmaz

Parametre url'den veri yükleyen bir fabrika var. Ben $http.get() iyonik kullanmazsam, slayt animasyonu (nav yönlendirici) çalıştırmaz, ancak $ http araması olmadan $state.change('newState') ararsam, animasyon mükemmel olur.

html kodunu görebildiğiniz gibi, $scope.pageData var veriyi yüklemek için $scope.navigate() işlevini çağırın ve sonra görünümü yüklenen tüm verilerle yükleyin.

Bunu yapmanın en iyi yolu olmadığını düşünüyorsanız, lütfen bana bu görevi nasıl başarabileceğimi söyleyin.

Kodum:

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

DÜZENLEME:

HTML KOD

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

ben ilk yükleme bazı görüntüler ve yolları için HTML kodu içine laravel Blade kodların görebileceğiniz gibi. Bu kodu çok uzun süre ayarlamak için şablonlardan birini koymuştum, kodu görmek için yeterli.

kaynak

2016-04-14 Programador Adagal

Fabrikada yanlış dönüş değeri.

bu deneyin:

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

Mükemmel çözüm:

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

Çağrı fabrika yöntemi: dataLoader.get (URL) .sonra (...);

kaynak

2016-04-14 11:58:44

Çok teşekkürler, kodunuz mükemmel çalışır, ancak yine de aynı sorun. Eğer $ http.get() ... 'ı kullanırsam, doğrudan $ scope.navigate'den de fabrikadan yaparsam mükemmel çalışır. Veri yükü her zaman mükemmeldir. Sorun, $ state.go() 'işlevini kullandığımda görünümün slayt animasyonu. Bir http araması yapmışsam animasyon yok. –

Lütfen html kaynağınızı da ekleyin. –

Düzenleme bölümüne bakın;) –

İyonik - Slayt animasyonu $ http isteği üzerinde çalışmaz

cevap

İlgili konular