javascript - 使用 ng-show 和 $window.onload 在页面加载后显示元素

Question

我有一个如下所示的 mainController。我想在使用 ng-show 完成页面加载后显示一个 div。我的 $scope.windowLoaded 在页面加载后为 true，但是带有 ng-show 的 div 没有出现。

angular.module('myApp')
  .controller('mainController', function ($scope, $window) {

    $scope.windowLoaded = false;
    console.log('loading completed: ' + $scope.windowLoaded);
    $window.onload = function() {
      $scope.windowLoaded = true;
      console.log('loading completed: ' + $scope.windowLoaded);
    };

  });

html:

<div ng-show="windowLoaded == true">
    Show this div after pageload succeeded.
</div>

Answer 1

问题似乎是 ng-show="windowLoaded == 'true'"。您正在检查 windowLoaded 是否等于 true 的 string 而不是 bool 值。

替换为:

<div ng-show="windowLoaded == true">
    Show this div after pageload succeeded.
</div>

Working Example

---

如果此后问题仍然存在，请尝试将您的范围语句包装在 $timeout 中以确保它已应用:

$window.onload = function() {
    $timeout(function() {
        $scope.windowLoaded = true;
    });
};

记得将 $timeout 传递给您的 Controller 。