ngIf 始终评估为 true答案

【问题标题】：ngIf always evaluates as truengIf 始终评估为 true
【发布时间】：2015-04-07 20:00:50
【问题描述】：

我正在使用 v1.3.9 开发一个 AngularJS 应用程序。我有几个 ng-if 指令总是评估为真，我不知道为什么。

<tr data-ng-repeat="line in chat">
                    <td class="message-timestamp">{{line.time | date:'short'}}</td>
                    <div ng-if="line.type === 'gist'">
                        <td class="message-nick">{{line.nick}}</td>
                        <td class="message-text">{{line.message}}
                            <p>
                                <code ng-show="showGist" walrus-auto-gistify data-gist-id="{{line.options[0]}}"></code>
                                <br>
                                <button ng-click="showGist = !showGist" class="btn btn-primary btn-xs">Show/Hide</button>
                            </p>
                        </td>
                    </div>
                    <div ng-if="false">
                        <td class="message-nick"><span class="glyphicon glyphicon-arrow-right"></span></td>
                        <td class="message-text">{{line.message}}</td>
                    </div>
                </tr>

当我运行这个时，两个ng-if 指令都被评估为真，所以两个divs 都会显示。

chat 只是一个对象数组。

【问题讨论】：

您确定您的代码正在浏览器中重新加载吗？那 ng-if="false" 不应该显示任何东西......也许检查浏览器中的代码以确保你认为你拥有的东西。
您的第一个问题可能是相关的。这些ng-if 元素是在页面加载后创建的。
@KevinB 它们是在东西被推送到chat 时创建的。有一个保存数据的服务，当元素被推送到它上面时，就会调用$rootScope.apply()
因此没有创建 html（或元素），而是驱动它的数据。这是不同的，不应影响ng-if 的工作。
好吧，如果我从data.length == 0 开始，然后是data.length == 1，那么所有这些元素都会被创建，对吧？

标签： javascript angularjs nw.js

【解决方案1】：

我很确定这与您将<div> 作为<tr> 的直接子代这一事实有关。我过去曾遇到过此类设计的问题，它会导致奇怪的行为。

解决方案是将<div>'s 放在<td> 中，如下所示：

<tr data-ng-repeat="line in chat">
    <td class="message-timestamp">{{line.time | date:'short'}}</td>
    <td class="message-nick">
        <div ng-if="line.type === 'gist'">{{line.nick}}</div>
        <div ng-if="line.type !== 'gist'"><span class="glyphicon glyphicon-arrow-right"></span></div>
    </td>
    <td class="message-text">
        <div ng-if="line.type === 'gist'">
            <p>
                <code ng-show="showGist" walrus-auto-gistify data-gist-id="{{line.options[0]}}"></code>
                <br />
                <button ng-click="showGist = !showGist" class="btn btn-primary btn-xs">Show/Hide</button>
            </p>
        </div>
        <div ng-if="line.type !== 'gist'">{line.message}}</div>
    </td>
</tr>

编辑： 尝试 JSFiddle here

【讨论】：

你明白了。我什至没有考虑过检查以确保<div>s 是<tr>s 的有效子代。非常感谢您指出这一点！