Question

我试图使用<div>隐藏整个ng-if，但我的下面的代码无效，大概是因为ng-if和ng-controller分配给了相同的<div>。

如果我将ng-if条件移动到父<div>内的任何元素，那么它可以正常工作，但我不想这样做，因为 -

我有一个多余的DOM元素可见，但内部没有任何内容。
我可能需要多次包含相同的ng-if条件。

因此，我的问题是如何隐藏整个<div>，而不仅仅是隐藏在其中的元素？

<div id="sidebar-recent" data-ng-controller="closestCtrl" data-ng-if="closestStation != false">

    <h3>Closest Station</h3>

    <ul class="stations-list" data-ng-model="closestStationsList">
        <li class="station" data-ng-click="selectStation(recentStation)">
            {{ closestStation.name }} ({{ (closestStation.code | uppercase) }})
        </li>
    </ul>

</div>

这是相关的JS -

var app = angular.module('myApp', [])

app.controller('closestCtrl', function($scope){
    $scope.closestStation = false;
});

Answer 1

我建议改用ng-hide或ng-show。

这些与ng-if之间的区别在于，后者从DOM中删除了元素，前者仅使用样式规则隐藏元素。

Answer 2

为什么要删除整个div？它不会起作用如果你正在使用ng-如果你实际上是从DOM中删除元素。因此控制器范围也将被删除。我认为不可能

Answer 3

只需为控制器添加另一个div。它会很容易解决你的问题...不要想太多..

像

这样的东西

<div data-ng-controller="closestCtrl">
<div id="sidebar-recent"  data-ng-if="closestStation != false">

    <h3>Closest Station</h3>

    <ul class="stations-list" data-ng-model="closestStationsList">
        <li class="station" data-ng-click="selectStation(recentStation)">
            {{ closestStation.name }} ({{ (closestStation.code | uppercase) }})
        </li>
    </ul>

</div>
</div>

当＆＃39; ng-controller＆＃39;时隐藏<div>元素。也被分配

3 个答案: