javascript - 需要用 angularjs 再次停止点击

标签 javascript angularjs

当用户单击按钮时,它会显示微调器图标,直到完成任务。但用户仍然可以再次单击该按钮。我该如何停止它?

enter image description here

Spinner directive

HTML

   <span us-spinner="{left: '91.6%',top:'65.5%',length: 5,width: 2,radius:4}" spinner-key="spinner-1"></span>
   <button class="btn btn-green" ng-click="MyClick()" ng-disabled="frmMy.$invalid"><i class="fa fa-envelope-o"></i> Send</button>

最佳答案

加载时应将 ng-disabled 设置为 true,加载完成后将其更改为 false。

我添加了jsfiddle这样做时,我使用了 5 秒的超时时间来进行假加载,而不是真正的加载。

这是解决您问题的逻辑。

HTML:

<div class="well" ng-controller="MyController">
    <button class="btn btn-primary" ng-disabled="isLoading" 
     ng-click="myClick()">BUTTON</button> 
</div>

Controller :

function MyController($scope,$timeout) {


    $scope.myClick = function() {
        $scope.isLoading = true;

        /// Faking Loading logic
        $timeout(function(){
            $scope.isLoading = false},5000)
    };


}

关于javascript - 需要用 angularjs 再次停止点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29258170/

相关文章:

javascript - 如何跨 Rails 应用程序共享 js/css/images?

javascript - JS 中输入意外结束

javascript - 推杆解除绑定(bind)不起作用

javascript - 使用 AngularJS d3 处理 JSON 数据

javascript - 滚动时根据背景颜色将导航文本和 Logo 颜色从白色反转为黑色/彩色?

javascript - 最后一个 div 后有很多白色可滚动空间 - 调整窗口大小正在修复它

javascript - Highcharts 仪表样式和添加 CSS 元素

javascript - 从 AngularJS 访问全局变量

html - ng-repeat 指令被另一个指令下推

javascript - 带有 ng-transclude 的指令将 html 包装在 ng-transclude 元素中