在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