我在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。我的问题是如何使用指令来实现这一点?换句话说,在从服务器加载完所有内容之前,如何隐藏指令所附加到的元素?
发布于 2013-08-09 02:34:43
在caseWrap元素上,放入ng-show="contentLoaded"
,然后在当前$('#caseWrap').show();
放入$scope.contentLoaded = true;
的位置
如果caseWrap元素在这个控制器之外,您可以使用$rootScope或events来做同样的事情。
发布于 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');
发布于 2016-03-29 05:06:05
被接受的答案对我不起作用。我有一些具有ng-show指令的元素,即使使用ng-cloak,这些元素仍然可以随时显示。在ng-show返回false之前,ng-cloak似乎已被解析。将ng-hide类添加到我的元素修复了我的问题。
https://stackoverflow.com/questions/18133319
复制相似问题