Javascript 如何在angular js中显示加载微调器

我正在使用angular js，并希望在一个按钮上定义操作，该按钮显示一个加载微调器，然后加载一些内容。我试图在视图和控制器之间进行正确的分离，但我不知道如何正确地进行分离

目前，我正在控制器中设置一个变量，并在视图中查看它-但它似乎有点冗长

HTML 小提琴：

---

使用angular js处理这种情况的正确方法是什么？

这几乎就是我过去所做的

此外，您可能需要添加一些保护以阻止双击：

$scope.doIt = function(){
    if($scope.loading == false) {
        $scope.loading = true
        setTimeout(function(){
            $scope.loading = false
            $scope.$apply()
        }, 500);
    }
};

如果您在多个位置执行相同类型的按钮，那么将概念封装到指令中会使事情变得整洁，并允许您在更改方法时修改基本行为。

这可能会有所帮助

var app = angular.module('myApp', []);

function inControl($scope) {
    $scope.loading = false
    $scope.doIt = function(){
        $scope.loading = true
        setTimeout(function(){
            $scope.loading = false
            $scope.$apply()
        }, 500)
    };
}

$scope.doIt = function(){
    if($scope.loading == false) {
        $scope.loading = true
        setTimeout(function(){
            $scope.loading = false
            $scope.$apply()
        }, 500);
    }
};