ng-cloak在解析模板时对于隐藏元素的angular ui-router无效。
ng-cloak在解析模板时对于隐藏元素的angular ui-router无效。
我正在使用angular ui-router。
如果 0">
,我想要显示一些东西。
虽然模板被立即下载和显示,但在控制器加载$scope.total =
之前,我们可以看到div闪烁的情况。
人们可能会认为$scope.total
在开始时是未定义的,因此div将被隐藏,但我认为模板尚未被解析,只是原样显示。我尝试使用ng-cloak,但似乎没有帮助。ngcloak应该在angular启动时使用,但我正在使用ui-router,因此angular堆栈已经加载。如何在不使用ui-router解析的情况下隐藏模板中的元素?
我使用的是angular 1.2.8和ui-router 0.2.7。
问题的原因是在Firefox浏览器和ui-router中,ng-cloak被忽略,没有CSS的解决办法,因此需要使用其他方法来隐藏元素。
解决方法是在每个控制器中添加以下代码:
$scope.$on('$viewContentLoaded', function () { $scope.completed = true; });
并且在每个视图的HTML中,将ng-if="completed"添加到最顶层的元素上。例如:
<div ng-if="completed">
注意:这个问题只限于Firefox浏览器和ui-router。在这种情况下,ng-cloak被忽略,没有CSS的解决办法。我给出的唯一解决方法是上述的方法。
ng-cloak doesn't help for angular ui-router for hiding elements while template parsing. The reason for this is that ng-cloak is not designed to be used in conjunction with ui-router and it doesn't work for elements that are added dynamically by the router.
One possible solution is to add the ng-cloak class manually to the elements that you want to hide while the template is being parsed. This can be done by adding the ng-cloak class to the parent element of the dynamic content or by using ng-class to conditionally add the ng-cloak class based on a certain condition.
For example, if you want to hide a div with the id "myDiv" while the template is being parsed, you can add ng-cloak to the parent element like this:
Alternatively, you can use ng-class to conditionally add the ng-cloak class based on a condition. For example, if you have a variable named "showDiv" that determines whether the div should be shown or hidden, you can use ng-class like this:
In this case, the ng-cloak class will only be added when the "showDiv" variable is false.
By manually adding the ng-cloak class to the elements or using ng-class to conditionally add it, you can effectively hide the elements while the template is being parsed, even when using ui-router.
For more information and examples, you can refer to the following Stack Overflow answer: https://stackoverflow.com/a/13276214/801354
ng-cloak doesn't help for angular ui-router for hiding elements while template parsing这个问题的出现的原因是ng-cloak指令无法在使用angular ui-router时隐藏元素,这是因为ng-cloak只能在AngularJS编译模板之前生效,而在使用ui-router时,模板的编译和渲染是异步进行的,ng-cloak指令无法在模板解析过程中生效。
解决这个问题的方法是需要手动添加样式来隐藏元素,可以使用以下样式代码来实现:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }
将以上样式代码添加到CSS文件中或者直接写在HTML文件的