ng-cloak在解析模板时对于隐藏元素的angular ui-router无效。

15 浏览
0 Comments

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。

0
0 Comments

问题的原因是在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的解决办法。我给出的唯一解决方法是上述的方法。

0
0 Comments

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

0
0 Comments

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文件的