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

Question

我在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,但不会消失.

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