SCSS

Question

我使用angular创建了一个单页应用程序。

问题是它需要很长时间才能加载。

我想向用户显示一个指示应用程序已加载的微调器。

问题是我想用ng-if="isAppLoading"

操纵外部div标签

我在我的angualr应用程序模型中为这个div选择了一个vaule。

我怎样才能把它写出来？

尝试使用$rootScope.isAppLoading，但这不会改变它的价值......

代码在

之下

感谢

这是我的small-talkz.model.js：

var smallTalkzModel = angular.module('smallTalkzModel', ['ngRoute']);
smallTalkzModel.config(function($routeProvider) {

    $routeProvider
    .when('/', {
      templateUrl : 'components/login/loginView.html',
      controller  : 'loginController'
    }) 
    .when('/chat', {
      templateUrl : 'components/chat/chatView.html',
      controller  : 'chatController'
    });
  }).run(function ($rootScope) {

    // App is loading, so set isAppLoading to true and start a timer
    console.log($rootScope);
    $rootScope.isAppLoading = false;

  });;

这是我的index.html

 <!DOCTYPE html>
 <html>
 <head>

    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>

    <script src="small-talkz.model.js"></script>
 </head>
 <div ng-app="smallTalkzModel" ng-view>
 </div>

 <div class="fade-it" ng-if="isAppLoading">
        <h3>loading</h3>
        <div spinner></div>
 </div>
 </html>

更新：我添加了以下代码：

 <div ng-app class="fade-it" ng-if="isAppLoading == false">

    <h3>loading --------> {{isAppLoading}} </h3>
    <div spinner></div>

 </div>

结果是文字：loading --------＆gt; {{isAppLoading}}

我可以看到角度未激活... {{isAppLoading}}未被评估..

Answer 1

请注意，您无法使用任何角度逻辑，例如ng-if或ng-show ，因为角度尚未启动，而且直到您的应用都被忽略正在运行（哪种方式遗漏了这一点）。

你需要改变你的逻辑。在加载角度应用之前，ng-if将无效。因此，最好在默认情况下显示加载程序，并仅在应用程序初始化时显示应用程序。

我做的是，已经配置了css中加载器的状态（因此，加载器是可见的，但应用程序本身不可见）。然后，当我对我的应用程序进行角度引导时，它会使用ng-class添加一个类（我在那里设置了一个真正的条件，无论如何都将其评估为真）。该类更改条件以隐藏加载程序并显示实际应用程序（现在已经加载）

这是我如何做到的：

HTML

<div ng-controller="mainController as main"
     class="main-app-container"
     ng-class="{'app-initiated': true}">
       <!-- APP CONTENT HERE -->
</div>
<div class="loading-logo"
     ng-class="{'app-initiated': true}">
     <div class="loading-spinner"></div>
</div>

仅在初始化角度时，才会处理ng-class。因此，您实际上并不需要$rootScope.isAppLoading。

在css方面，我执行以下操作：

SCSS

.main-app-container {
  opacity: 0;
  transition: opacity 0.5s ease;

  // shows the app
  &.app-initiated {
    opacity: 1;
  }
}

.loading-logo {
  transition: all 500ms ease;
  transition-delay: 800ms;

  // hides the loader
  &.app-initiated {
    opacity: 0;
    visibility: hidden;
    z-index: -1;
  }
}

ofc你仍然可以使用一个变量来告诉应用程序何时加载$rootScope.isAppFinishedLoading而不是html中的true。

希望这有助于： - ）

创建一个登录微调器，而角度单页面应用程序是bootstraping

1 个答案:

HTML

SCSS