在 angularjs 中获取数据时在温泉 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();吗？

谢谢！

Answer 1

像这样让你的模型直接 child of body。

<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 中获取数据时在温泉 ui 中显示 MODAL

Show MODAL in onsen ui while data is fetching in angularjs

javascript

angularjs

onsen-ui