Question

我有一个mainController，如下所示。我希望在使用ng-show完成页面加载后显示div。在页面加载后我的$scope.windowLoaded为真，但没有出现带有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

你可以试试

Connection

Answer 2

问题似乎是ng-show="windowLoaded == 'true'"。您正在检查windowLoaded是否等于true的字符串而不是布尔值。

将其替换为：

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

<强> Working Example

如果此后问题仍然存在，请尝试将范围说明包装在$timeout内以确保其已应用：

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

请记住将$timeout传递给您的控制器。

Answer 3

您也可以尝试使用viewContentLoaded事件

    myapp.controller('MyController', ['$scope'
      function($scope) {
        $scope.$on('$viewContentLoaded', function() {$scope.windowLoaded = true;}); 
   }]);

使用ng-show和$ window.onload

3 个答案: