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

基本上按一下按鈕，在頂部加載兩個數據集。我有一個超時在那裏模擬服務器上的一些思考時間。每當你看到「Loading ...」時，不應該顯示appointmentList表格的div，因爲ng-hide會評估爲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有用。

Answer 2

$scope.appointments被設置在與$scope.loading相同的刻度內嗎？

如果$scope.filterAppointments正在進行異步操作，您需要確保$scope.loading在該進程結束時設置爲false。

Answer 3

就我而言，在IE或Chrome中應用到ul> li元素時，angular並不想顯示/隱藏。將其更改爲div完美。我在角1.2.14。不知道這是否是一個錯誤，但它似乎是。

Answer 4

我有同樣的問題。我使用了ng-cloak，它使我的應用程序加載時，瀏覽器不顯示模板。

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