javascript - 如何在角度js中显示加载微调器

Question

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

目前，我正在控制器中设置一个变量，并在视图中观察它 - 但它似乎有点啰嗦。

HTML

<div ng-app="myApp">
    <div ng-controller="inControl">
        <button ng-click="doIt()">Cool <i ng-show="loading">...</i></button>
    </div>
</div>

JS

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)
    };
}

小提琴：http: //jsfiddle.net/billymoon/4es3h/

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

Answer 1

这几乎正​​是我过去所做的。

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

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

如果您在多个地方使用相同类型的按钮，则将概念包装到指令中将使事情变得整洁，并允许您在更改方法时修改底层行为。