AngularJS - 显示/隐藏加载器

Question

关于 angularJS 中“范围”的问题 我尝试在搜索时显示加载动画。

在我的控制器中，我创建了一个名为“loader”的变量，并在 HTML 中将 ng-show="loader" 放在我想要显示/隐藏的 div 上

简单……但是……

我可以显示加载程序但无法隐藏它...

这是我的代码...

HTML :

 <secion ng-controller="ContactsCtrl">
    <div class="loader" ng-show="loading"></div>

    <h2>Contacts</h2>

    <form class="form-search">
        <input type="text" ng-model="s_search" placeholder="Search for a contact...">
        <button type="submit" class="btn" ng-click="search()">Search</button>    
    </form>

    <div id="resultContact"></div>

</section>

JS：

function ContactsCtrl($scope){
    $scope.loading = false;

    $scope.endLoading = function(){
        $scope.loading = false;
    }     

    $scope.search = function() {
        $scope.loading = true;

        setTimeout($scope.endLoading, 1000);
    }
}

我想问题出在“范围继承”上，但我没有看到我的错误

Answer 1

$scope.$apply()每当您在 Angular 之外调用 Angular 时都需要调用（例如 jQuery 事件处理程序，或者，这里是setTimeout()）。但最好的方法是使用 Angular 服务$timeout（文档），它执行相同的工作并调用$apply.