Angular ng-show在值變爲false後仍然顯示div

我試圖在任何異步調用在後臺完成時使用ng-show來顯示加載欄。下面簡化的代碼示例，但我發現，$ scope.page_loaded成爲true後，兩個div都會顯示，並且加載div不會隱藏。Angular ng-show在值變爲false後仍然顯示div

我對Angular相當陌生，所以這可能是一個菜鳥錯誤。

編輯：即使在下面的簡單例子中，沒有任何異步調用，我得到兩個div顯示。

controllers.js

controllers.controller('AuthController', ['$scope', '$window', function($scope, $window) { 
    $scope.page_loaded = false; 

// DO SOME LOGIC HERE 

    $scope.page_loaded = true; 

}]);

的index.html

<div class="page-content" layout="row" flex layout-align="center center" ng-show="!page_loaded"> 
    <div class="loading"> 
     <p class="loading-text">Loading...</p> 
     <md-progress-linear md-mode="indeterminate"></md-progress-linear> 
    </div> 
</div> 

<div ng-view class="page-content" layout="row" flex ng-show="page_loaded"></div>

來源

2015-08-26 christophmccann

你應該發佈發生異步的東西 – tymeJV

即使在上面的簡單例子中，也會出現相同的行爲，這兩個div都會顯示出來。 – christophmccann

我已經嘗試在加載div上使用ng-hide =「page_loaded」，它仍然顯示div – christophmccann

我能夠通過使用$ rootScope來解決這個問題。這就是說，我不知道爲什麼這個作品和$範圍沒有。

來源

2015-08-27 09:56:53 christophmccann

你可以嘗試在超時包裹它：

// DO SOME LOGIC HERE 

$timeout(function() { 
    $scope.page_loaded = true; 
)},0);

不要忘記注入該模塊： controllers.controller('AuthController', ['$scope', '$window', '$timeout', function($scope, $window, $timeout) {

我個人不喜歡使用超時，但如果DOM沒有更新，這可能是一種解決方法。

這裏的假設是，您的/ /某些邏輯在這裏是影響你的$ scope.page_loaded變化。超時會強制事件進入堆棧，以便瀏覽器趕上，這就是爲什麼它被設置爲0的原因。我們沒有使用$ timeout（fn，0）。作爲在一段時間之後進行更改的手段。

來源

2015-08-26 17:11:33 Fred

更多內容：http://stackoverflow.com/questions/22881374/why-is-this-simple-angularjs-ng-show-not-working – isherwood

更新

<div class="page-content" layout="row" flex layout-align="center  center" ng-show="page_loaded"> 
<div class="loading"> 
    <p class="loading-text">Loading...</p> 
    <md-progress-linear md-mode="indeterminate"></md-progress-linear> 
</div>

<div ng-view class="page-content" layout="row" flex ng-show="!page_loaded"></div> 


controllers.controller('AuthController', ['$scope', '$window', function($scope, $window) { 
    $scope.page_loaded = true; 
     // DO SOME LOGIC HERE 
    if(SOMETHING_RETURNS_TRUE) { 
    $scope.page_loaded = false; 
    ///THIS WILL HIDE THE LOADER 
    } 
}]);

您所做的錯誤就在於，你將它設置爲false，然後它的值爲true上的負載，所以它肯定會顯示。

然而，你可以使用$ timeout來設置一個間隔，就像在純JS中使用setTimeout一樣，所以在一段時間後它將它改回來顯示最後一個div。

$timeout(function(){ 
    $scope.page_loaded = false; 
}, 5000);

不要忘記注入$超時。

來源

2015-08-26 17:28:23

我想你需要實際的邏輯實例，從虛假到真實的變化。要擴大對弗雷德的回答是：這裏是一個plunker

http://plnkr.co/edit/NqZ5YdHzVcoGnceEU3sV?p=preview

$scope.pageloaded = false; 

$timeout(function() { 
    $scope.pageloaded = true; 
}, 2000);

<div ng-show="!pageloaded"> 
    Loading... 
</div> 

<div ng-show="pageloaded"> 
    page_loaded 
</div>

來源

2015-08-26 17:29:33 jakeed1

Angular ng-show在值變爲false後仍然顯示div

回答

相關問題