Question

我在angularJS应用程序中有以下HTML部分。＆lt; div /＆gt;约会列表的标签显示约会列表。该指令基本上只是一个表。

    <div ng-show="loading">Loading...</div>
    <div ng-show="!loading && (appointments.length == 0)">No Appointments Found</div>
    <div ng-hide="loading || (appointments.length == 0)">Test123</div>
    <div ng-hide="loading || (appointments.length == 0)" appointment-list source="appointments" appointment-selected="appointmentSelected(appointment)"></div>

然后我在控制器中有以下内容。我在飞行中设置加载变量，然后我还根据文本框中的文本过滤页面上的约会。

    $scope.$watch('selectedDate', function(newVal, oldVal) {
    if (newVal) {
            $scope.loading = true;
            Appointment.query({year: newVal.getYear()+1900, month: newVal.getMonth()+1, day: newVal.getDate()}, function(data) {
                    $scope.allAppointments = data;
                    $scope.appointments = $scope.filterAppointments();
                    $scope.loading = false;
            });
    }

    });

我的问题是隐藏我的自定义指令的div并没有正确发生。该表应该与＆＃34; Test123＆＃34;完全一起消失。字符串，而不是。当我从选定的日期开始，表格填充到没有任何内容的日期，＆＃34; Test123＆＃34;将被替换为加载（因为它被隐藏，并显示加载）但是表格一直保留到加载过程完成之后，此时表格将消失

有人可以解释为什么延迟？为什么指令没有像上面的div那样完全响应？

修改

这是一个显示问题的plnkr：http://plnkr.co/edit/khxQuaM6sxTx5RszvowX?p=preview

基本上点击顶部的按钮加载两个数据集。我有一个超时来模拟服务器上的一些思考时间。每当你看到＆＃34;正在加载......＆＃34;不应显示为约会列表表格的div，因为ng-hide将评估为true，因为加载为真，但不会消失。

Answer 1

您需要使用$parent来访问模型loading，因为指令appointmentList会创建一个独立的范围。对包含表的最后一个div进行以下更改，您将获得所需的效果。

<div ng-hide="$parent.loading || (appointments.length == 0)" appointment-list source="appointments" ... ></div>

您不需要使用$parent来引用appointments，因为您将此模型传递给指令。但是添加$parent之类的$parent.appointments.length == 0没有任何害处，因为您在父作用域中无论如何都定义了appointments。

顺便说一句，您还应该在观察者中将appointments设置为empty

if (newVal) {
    $scope.loading = true;
    $scope.appointments = [];  //add this

使条件appointments.length == 0有用。

Answer 2

$scope.appointments是否设置在与$scope.loading相同的标记内？

如果$scope.filterAppointments正在执行异步操作，您需要确保在该过程结束时将$scope.loading设置为false。

Answer 3

在我的情况下，当应用于ul＆gt;时，angular不想显示/隐藏。 li元素，在IE或Chrome中。将其更改为div非常有效。我在角度1.2.14。不确定这是不是一个bug，但似乎是。

Answer 4

我遇到了同样的问题。我使用了ng-cloak，它可以防止浏览器在我的应用程序加载时显示模板。

看看这个： http://weblog.west-wind.com/posts/2014/Jun/02/AngularJs-ngcloak-Problems-on-large-Pages

angularJS指令不能立即兑现ng-show / ng-hide

4 个答案: