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

发布时间：2020-12-17 17:18:22 所属栏目：安全来源：网络整理

导读：我在angularJS应用程序中有以下 HTML部分. div /约会列表的标签显示约会列表.该指令基本上只是一个表. div ng-show="loading"Loading.../div div ng-show="!loading (appointments.length == 0)"No Appointments Found/div div ng-hide="loading || (appoint

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

解决方法

您需要使用$parent来访问模型加载,因为指令appointmentList创建了一个隔离的范围.对包含该表的最后一个div进行以下更改,您将获得所需的效果.

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

您不需要使用$parent来引用约会,因为您将此模型传递给指令.但是像$parent.appointments.length == 0这样添加$parent是没有害处的,因为你在父范围内仍然定义了约会.

顺便说一句,你也应该像这样在观察者中将约会设置为空

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

使条件约会.长度== 0有用.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!