Question

我知道有很多关于此的问题，但是很多问题已经过时了（有些人不再使用新的Angular版本了）而其他人与我尝试的内容无关实现

基本上我有一个ng-view：

<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 bg-body">
   <div ng-view></div>                       
</main>

我用http.get完成路由和部分后显示数据。正如标题中所写，我希望在ng-view内部显示一个空白（白色）页面，并在我的数据加载时使用微调器（<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>）。

我尝试了一个指令，但它似乎无效：

AngularJS：

var app = angular.module('app', ['plangular','ngRoute', 'ngSanitize', 'slick']);

app.directive('loading', function () {
      return {
        restrict: 'E',
        replace:true,
        template: '<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>',
        link: function (scope, element, attr) {
              scope.$watch('loading', function (val) {
                  if (val)
                      $(element).show();
                  else
                      $(element).hide();
              });
        }
      }
});

HTML：

<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 bg-body">           
    <loading></loading>
    <div ng-view></div>                        
</main>

什么是最好的方法？

Answer 1

执行此操作并将/home路线替换为您的模板，不要删除ng-if模板中的/home，且该路径必须是您的主页

<强>的index.html

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
    <script data-require="angular-router@1.4.0-beta.3" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.2.16/angular-route.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <main ng-controller="mainCtrl">
      <loading ng-if="showSpin"></loading>
      <div ng-view="" ng-if="!showSpin"></div>
      <!--<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>-->
    </main>
  </body>

</html>

<强>的script.js

//代码在这里

angular.module('app', ['ngRoute'])
    .controller('mainCtrl', function($rootScope,$scope, $timeout) {
        $rootScope.showSpin = true;

    $rootScope.$on('$routeChangeStart', function(event, toState, toParams, fromState, fromParams){
      $timeout(function(){$rootScope.showSpin = true;
      $scope.showSpin = true;}, 5000); // Just addedto show loader, you can remove the `$timeout`
    });
    $rootScope.$on('$routeChangeSuccess', function(event, toState, toParams, fromState, fromParams){
      $timeout(function(){$rootScope.showSpin = false;
      $scope.showSpin = false;}, 5000); // Just addedto show loader, you can remove the `$timeout`
    });
})
.directive('loading', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>',
        link: function(scope, element, attr) {
            scope.$watch('showSpin', function(newVal) {
                if (newVal)
                    $(element).show();
                else
                    $(element).hide();
            });
        }
    }
})
.config(function($routeProvider) {
    $routeProvider
        .when('/home', {
            url: '/home',
            template: '<div>Hello world!</div>',
            controller: function($scope) {
            }
        })
        .when('/example', {
            url: '/example',
            template: '<div>Hello Example!</div>',
            controller: function($scope) {
            }
        })
        .otherwise({ redirectTo: '/example' })
})

更新的答案 我已经更新了答案。请检查

工作plunker

加载ng-view之前的空白预加载器

1 个答案: