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

Question

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

目前，我正在 Controller 中设置一个变量，并在 View 中观察它 - 但似乎有点啰嗦。

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

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

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