Question

我有一个ons-button元素

<ons-button modifier="large--cta" ng-click="login($event, input.email, input.password)">Log In</ons-button>

正在尝试使用OnsenUI的ons-button的startSpinner（）方法启动按钮上的微调器以向用户显示应用正在处理其请求的函数（登录）。

我尝试了以下但没有成功。这些功能都不是根据控制台定义的。

event.currentTarget.startSpinner()

event.target.startSpinner()

startSpinner(event.currentTarget)

如何从通过ng-click调用的函数启动按钮上的微调器？

Answer 1

您需要做的是首先按如下方式定义服务：

app.factory('service', ['$rootScope', function($rootScope) {
  return {
    showSpinnerAuto : function() {
        modal.show();
        setTimeout('modal.hide()', 10000);
    },
    showSpinnerTimer : function(timer) {
        modal.show();
        setTimeout('modal.hide()', timer);
    },
    showSpinner : function() {
        modal.show();
    },
    hideSpinner : function() {
        modal.hide();
    }
  };

}]);

您还需要在视图中定义微调器模型，如下所示：

<ons-modal var="modal">
    <i class="fa fa-spinner fa-spin fa-pulse"></i>
    <br><br>loading...
</ons-modal>

最后，您可以按如下方式在控制器中调用show / hide Spinner：

app.controller('Controller', ['$rootScope', '$scope', 'service', function($rootScope, $scope, service) {
    service.showSpinner(); //show
    service.hideSpinner(); //hide
    service.showSpinnerAuto(); //show and then hide automatically
}]);

希望这有帮助！

如何在OnsenUI版本1的ons按钮上正确调用startSpinner（）？

1 个答案: