在angularjs中獲取數據時在onsen ui中顯示MODAL

Question

我正在嘗試從服務器獲取數據。 自從獲取以來，我想顯示一個模態，直到未完全加載。

這是我正在使用的。

<ons-page ng-controller="directoryControl">

      <ons-modal var="modal">
        <ons-icon icon="ion-load-c" spin="true"></ons-icon>
        <br><br>
        Please wait.<br>Closing in 2 seconds.
      </ons-modal>

      <ons-list>

        <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="PostCategory in PostCategories">
          <ons-row>
            <ons-col>
              <div class="name">
                {{PostCategory.title}}
              </div>
            </ons-col>
          </ons-row>
        </ons-list-item>
      </ons-list>
    </ons-page>

我的模態在angularjs中是這樣的。

var module = angular.module('app', ['onsen']);
    module.controller('directoryControl', function($scope, $http) {
    ons.ready(function() {

                    //console.log($scope.username + ", " + $scope.password);
                    modal.show();

                    var responsePromise = $http.get("http://www.mywebsitepadth.com/api/get_category_index/");
                    responsePromise.success(function(data, status, headers, config) {
                        modal.hide();
                    });
                    responsePromise.error(function(data, status, headers, config) {
                        alert("ajax didnt work");
                    });
        });
    });

我可以知道為什么我在執行modal.show();時不顯示模式modal.show(); ？

謝謝！

Answer 1

這樣使您的模特身材直子。

<body>
   <ons-modal var="modal">
        <ons-icon icon="ion-load-c" spin="true"></ons-icon>
        <br><br>
        Please wait.<br>Closing in 2 seconds.
      </ons-modal>

這樣，您將可以在任何控制器中的任何位置訪問模式。 現在您的控制器應該是這樣的。

module.controller('directoryControl', function($scope, $http) {

                    //console.log($scope.username + ", " + $scope.password);
                    modal.show();

                    var responsePromise = $http.get("http://www.mywebsitepadth.com/api/get_category_index/");
                    responsePromise.success(function(data, status, headers, config) {
                        modal.hide();
                    });
                    responsePromise.error(function(data, status, headers, config) {
                        alert("ajax didnt work");
                    });
    });

在angularjs中獲取數據時在onsen ui中顯示MODAL

問題描述

1 個解決方案

解決方案1
4 已采納 2015-05-11 10:25:21

在angularjs中獲取數據時在onsen ui中顯示MODAL

問題描述

1 個解決方案

解決方案1 4 已采納 2015-05-11 10:25:21

解決方案1
4 已采納 2015-05-11 10:25:21