gpt4 book ai didi

javascript - AngularJS - 显示/隐藏加载器

转载 作者:行者123 更新时间:2023-11-28 15:52:31 24 4
gpt4 key购买 nike

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

在我的 Controller 中,我创建了一个名为“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);
}
}

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

最佳答案

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

关于javascript - AngularJS - 显示/隐藏加载器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20005112/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com