AngularJS - ng-if和ng-show / ng-hide表现得很疯狂

时间:2017-09-18 14:37:44

标签: javascript angularjs

似乎AngularJS在以下情况下做出了疯狂的反应:

当我从另一个Controller提供路由时,一切正常,模板显示正确。但是在浏览器中重新加载相同的路径(!)之后,模板表现得很疯狂,因为ng-if和ng-show / ng-hide块表现不正常。该模板涉及search() - 来自URL的变量(通过AngularJS获得)。

可能是什么问题?

在我的控制器中:

$scope.excel = $location.search().excel;

我通过console.log()检查了这个,它是假的。但是我的模板行为不对,我累了从=== true= true以及所有这些内容的所有内容。

<div class="row" ng-hide="loading" ng-show="!excel && !tooMuchData">

2 个答案:

答案 0 :(得分:0)

向我们提供附带的代码和/或Plunker以展示您的问题是有益的。

我会根据您提供的稀疏信息猜测:

该视图的控制器的某种状态受到来自您所处的状态或进入该状态时传递给控制器​​的事实的影响。

以下是一些如何发生这种情况的例子:

  1. 当您更改状态时,会将某些内容传递给控制器​​。让我们假设您按类别列出您的色情视频并列出它们(/色情)。当您选择某个类别(例如MILF)时,您将打开一个新视图(输入一个新状态并传递该类别的ID)。现在路线是/ porn / MILF然后你列出视频。此部分中的所有视频现在都来自您通过路由器从之前状态传递的ID类别。刷新时,如果您没有设置默认值,那么Id变为未知,并且当数据ut中的过滤器未知时,可能会变得质朴。

  2. 您的控制器依赖于$ rootScope中的某些属性,该属性在刷新时重置。与上面的例子相同,但选择了你所说的类别。

  3.   

    $ rootScope.pickedCategory =&#39; MILF&#39;

    你现在尝试使用它来控制你的控制器,但它现在还不知道。你应该像这样停止滥用rootScope。

    编辑:既然你提供了代码ng-show和ng-hide in同一个对象是一个可怕的想法,可能是问题的原因。

    使用同一元素中的任何一个。

    您始终可以将此规则用于条件:

    条件你想成为现实 - A和条件你想成为假 - B

    等于:

    条件你想成为真正的A&amp;&amp; !乙

    条件你想成为假B&amp;&amp; !甲

答案 1 :(得分:0)

为什么你在同一个div上同时使用ng-hideng-show。 ng-hide是ng-show的反转,反之亦然。两者都是设置display: nonedisplay: block。也没有提及您的loading参数。

只需将ng-show!loading一起使用即可。 例如:ng-show= "!excel && !tooMuchData && !loading"