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