angularJS 指令不会立即支持 ng-show/ng-hide

Question

我在 angularJS 应用程序中有以下 HTML 部分。约会列表的

标签显示约会列表。该指令基本上只是一个表格。

    <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>

然后我的 Controller 中有以下内容。我在事情进行中时设置了一个加载变量，然后我还根据文本框中的文本过滤页面上的约会。

    $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 将评估为真，因为加载为真，但不会消失。

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有用。