Javascript AngularJS-显示/隐藏加载程序

关于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>

---

我想问题出在“scope inherits”上，但我看不出我的错误

无论何时调用Angular外部的Angular（例如jQuery事件处理程序或这里的

setTimeout（）

），都需要调用

$scope.$apply（）

）。但最好的方法是使用Angular服务，

$timeout

（），它执行相同的任务并调用

$apply

，您需要调用

$scope.$apply（）

，无论何时调用Angular外部的Angular（例如jQuery事件处理程序或这里的

setTimeout（）

）。但是最好的方法是使用Angular服务，

$timeout

（），它执行相同的任务并调用

$apply

setTimeout，它不在Angular的摘要周期内。您需要使用$timeout来提醒angular您的函数

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

---

setTimeout超出了角度的摘要周期。您需要使用$timeout来提醒angular您的函数

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

---

使用$timeout还可以测试代码。使用$timeout还可以测试代码。