AngularJS - 显示/隐藏加载器

时间:2013-11-15 15:54:03

标签: javascript angularjs

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

在我的控制器中,我创建了一个名为“loader”的var 在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);
    }
}

我认为问题在于“范围继承”,但我没有看到我的错误

2 个答案:

答案 0 :(得分:4)

每当你在Angular之外调用Angular时都需要调用$scope.$apply()(例如,jQuery事件处理程序,或者setTimeout())。但最好的方法是使用Angular服务$timeoutdocs)执行相同的工作调用$apply

答案 1 :(得分:0)

setTimeout超出了Angular的摘要周期。您需要使用$ timeout来提醒您有关您的功能的角度。

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

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

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

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

我想指出,您似乎在做某种“加载”,这意味着使用$ http或其他数据查找。您可以将函数绑定到完成事件,或者在更改的数据上设置观察程序,而不是设置计时器。

例如:

$scope.$watch("searchData", function () {
  $scope.loading = false;
}, true);


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

  $http.get("/searchUrl", function (res) {
    $scope.searchData = res;
  });
});