4

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

    <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 隐藏没有正确发生。该表应该与“Test123”字符串一起消失，而不是。当我从一个选定的日期开始填充表格到一个没有任何内容的日期时，“Test123”将被加载替换（因此它被隐藏，并且加载被显示）但表格仍然存在，直到加载过程结束完成，此时表格将消失

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

编辑

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

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

4

4 回答 4

5

您需要使用$parent来访问模型loading，因为该指令appointmentList创建了一个隔离范围。对包含表格的最后一个 div进行以下更改，您将达到您想要的效果。

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

您不需要使用$parentto 引用appointments，因为您将此模型传递给指令。$parent但是添加like并没有什么坏处$parent.appointments.length == 0，因为您已经appointments在父范围中定义了。

顺便说一句，你也应该像这样设置appointments在empty观察者中

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

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

于 2013-08-19T04:47:00.413 回答
0

是否$scope.appointments设置在与 ? 相同的刻度内$scope.loading？

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

于 2013-08-19T03:35:33.930 回答
0

就我而言，在 IE 或 Chrome 中，当应用于 ul > li 元素时，angular 不想显示/隐藏。将其更改为 div 效果很好。我在角度 1.2.14。不确定这是否是错误，但似乎是。

于 2014-04-07T23:37:03.213 回答
0

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

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

于 2015-01-12T09:15:48.993 回答