Angularjs -在加载DOM之前隐藏内容
Angularjs -在加载DOM之前隐藏内容
提问于 2013-08-09 02:24:52
我在Angularjs中遇到了一个问题，在我的数据从服务器返回之前，我的HTML中有一个闪烁。
这是一个演示这个问题的视频：http://youtu.be/husTG3dMFOM -注意右边的#|和灰色区域。
我尝试过ngCloak，但没有成功(尽管ngCloak确实阻止了括号的出现)，我想知道隐藏内容的最好方法，直到Angular填充完它。
我让它与我的控制器中的以下代码一起工作：
var caseCtrl = function($scope, $http, $routeParams) {
$('#caseWrap').hide(); // hides when triggered using jQuery
var id = $routeParams.caseId;
$http({method: 'GET', url: '/v1/cases/' + id}).
success(function(data, status, headers, config) {
$scope.caseData = data;
$('#caseWrap').show(); // shows using jQuery after server returns data
}).
error(function(data, status, headers, config) {
console.log('getCase Error', arguments);
});
}...but我一次又一次地听到不要从控制器操作DOM。我的问题是如何使用指令来实现这一点？换句话说，在从服务器加载完所有内容之前，如何隐藏指令所附加到的元素？
回答 3
Stack Overflow用户
发布于 2013-08-09 02:34:43
在caseWrap元素上，放入ng-show="contentLoaded"，然后在当前$('#caseWrap').show();放入$scope.contentLoaded = true;的位置
如果caseWrap元素在这个控制器之外，您可以使用$rootScope或events来做同样的事情。
Stack Overflow用户
发布于 2013-08-09 02:49:21
既然您请求了一个指令，那么试试这个。
.directive('showOnLoad', function() {
return {
restrict: 'A',
link: function($scope,elem,attrs) {
elem.hide();
$scope.$on('show', function() {
elem.show();
});
}
}
});将显示(show-on-load)放入你的元素中，并在你的控制器中注入$rootScope，并在加载完html后使用这个广播事件。
$rootScope.$broadcast('show');Stack Overflow用户
发布于 2016-03-29 05:06:05
被接受的答案对我不起作用。我有一些具有ng-show指令的元素，即使使用ng-cloak，这些元素仍然可以随时显示。在ng-show返回false之前，ng-cloak似乎已被解析。将ng-hide类添加到我的元素修复了我的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18133319
复制相关文章
相似问题