Question

我正在使用LoadAwesome，我想知道如何在加载数据之前更改选择值时显示微调器div。 目前我正在使用AJAX请求加载数据。

简单说明：所选更改 - ＆gt; show spinner - ＆gt;加载数据

我已经尝试过这样做，但加载的数据没有微调器效果。：（

<select id="select_data">
  <option value="">Choose one..</option>
  <option value="1">Value 1</option>
  <option value="2">Value 2</option>
</select>
<div class="content">
  <div id="spinner">
    <div style="color: #79bbb5" class="la-ball-spin-fade la-2x">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <br>
  <div id="text"></div>
</div>

$("#select_data").change(function() {
    // I want to show the spinner when I change select value before load the data -->
   // So before show this, I'll show the spinner and then, the text.
   $("#text").html(($("#select_data option:selected").text()));
});

https://jsfiddle.net/0e6rtog5 - Unfortunatel jsfiddle没有显示微调器。

Answer 1

使用此：

显示变化：

    var directive = {
        restrict: 'AE',
        scope: false,
        multiElement: true,
        link: link
    };
    $rootScope.cityName = cookieService.getCookie('lang');
    $rootScope.translateThese = [];
    $rootScope.translationData = '';
    $rootScope.translationCounter = 0;

    function link(scope, element, attr) {

        scope.$evalAsync(function() {
            $rootScope.translateThese.push(element[0]);

            scope.$on('translateAPISuccess', function(e, data) {
                angular.forEach($rootScope.translateThese, function(elem) {
                    var translatedString = $rootScope.translationData[elem.innerHTML.trim().toLowerCase()];
                    elem.innerHTML = translatedString;
                    // $compile(element.contents())(scope);
                })
            })
        });

        // This is a 0 second timeout to push the execution of this
        // directive to the next digest cycle where all the dynamic values
        // are present. I can also use scope.$evalSync for this purpose.
        // 
        // @example
        // $timeout(function() { 
        //
        $timeout(function() { // We could also use scope.$watch here watching $viewContentLoaded // scope.$watch('$viewContentLoaded', function(e, u) {
            $rootScope.translationCounter++;
            var translateThese = [];
            // if (scope.$last === true && scope.translationCounter === $rootScope.translateThese.length) { //we can use this but scope.$last isn't working
            if ($rootScope.translationCounter === $rootScope.translateThese.length) {
                $rootScope.translateThese.forEach(function(sentence) {
                    // trim.apply(sentence).split(" ").forEach(function(v) {
                        translateThese.push(sentence.innerHTML.replace(/[^a-zA-Z ]/g, ""));
                    // })
                })
                dataService.staticTranslation('guj', translateThese).then(function (response) {
                    $rootScope.translationData = response.response;
                    scope.$emit('translateAPISuccess', response.response);
                    // When using the translateAPI from horizontal
                    // $rootScope.translationData = JSON.parse(response.response).StaticLangTranslationApplicationResponse.StaticLangTranslationApplication.translations;
                    // scope.$emit('translateAPISuccess', JSON.parse(response.response).StaticLangTranslationApplicationResponse.StaticLangTranslationApplication.translations);
                });
            }
        });
    }

    return directive;
}

将其隐藏在ajax成功：

 $('.la-ball-spin-fade').hide();//hide by default  -can use css
    $("#select_data").change(function({     
    $('.la-ball-spin-fade').show();
        //trigger ajax
    });

https://jsfiddle.net/mgp699za/1/

Answer 2

这将给出如何在选择更改

上加载微调器的要点

$("#select_data").on('change', function() {
  // show spinner here
  $('#spinner').show(); // or do addClass('spinner')

  $.ajax({
    url: "test.html"
  }).done(function() {
    // hide again on response of ajax
    $('#spinner').hide(); // or remove class removeClass('spinner')
  });
});

DEMO

还请为LoadAwesome模块添加网址，以便我们更轻松

选择更改时显示/隐藏微调器

2 个答案: