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

Question

我正在使用角度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);
    }
};

如果您在多个位置执行相同类型的按钮，将概念包装到指令中会使事情变得更加容易，并且如果您改变方法，则允许您修改基础行为。