javascript - AngularJS, ng-view + css3 keyframes with jade template - ng-cloak 不工作

Question

我目前正在构建:https://github.com/btford/angular-express-blog一些代码，它使用了 nodeJS、Express、Jade 和明显的 AngularJS。在这篇文章中，我运行的是最新版本的 AngularJS。

我在让 ng-cloak ( http://docs.angularjs.org/api/ng.directive:ngCloak) 在我的应用程序中正常工作时遇到问题。我的动画和路线运行良好，但 ng-cloak 不适合我。每当我为模板开关设置动画时，模板都会在动画进入之前闪烁/闪烁。

我很确定我已经完全按照文档中的描述实现了此操作，因此非常感谢任何关于我做错了什么的见解。

模块

'use strict';

// Declare app level module which depends on filters, and services
angular.module('myApp', ['ngRoute', 'ngAnimate', 'myApp.filters', 'myApp.services', 'myApp.directives']).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/index',
        controller: IndexCtrl
      }).
      when('/addPost', {
        templateUrl: 'partials/addPost',
        controller: AddPostCtrl
      }).
      when('/readPost/:id', {
        templateUrl: 'partials/readPost',
        controller: ReadPostCtrl
      }).
      when('/editPost/:id', {
        templateUrl: 'partials/editPost',
        controller: EditPostCtrl
      }).
      when('/deletePost/:id', {
        templateUrl: 'partials/deletePost',
        controller: DeletePostCtrl
      }).
      otherwise({
        redirectTo: '/'
      });
    $locationProvider.html5Mode(true);
  }]).

  controller('IndexCtrl', function (
    $window,
    $location
  ){
    this.switch = function() {
      $location.path('/addPost' == $location.path() ? '/' : '/alt');
    };
  });

我已经尝试通过多种方式在 body 标签中包含 ng-cloak 和 class="ng-cloak":

body(ng-controller="IndexCtrl as main" ng-cloak class="ng-cloak")

我试过了

body(ng-controller="IndexCtrl as main" ng-cloak)

我试过了

body(ng-controller="IndexCtrl as main" class="ng-cloak")

我也试过将 ng-cloak 添加到我的模板中，而不是像上面一样将它包含在正文中:

#indexTemplate(ng-cloak class="ng-cloak")
  p There are {{posts.length}} posts
  div(ng-repeat='post in posts')
    h3 {{post.title}}
    div {{post.text}}
    a(href='/readPost/{{post.id}}') More
    |  -
    a(href='/editPost/{{post.id}}') Edit
    |  - 
    a(href='/deletePost/{{post.id}}') Delete

我的索引，声明 ng-view 和脚本

extends layout

block body
  div#index
    h2 My Blog
    ul
      li
        a(href='/') Home
      li
        a(href='/addPost') Add a new post
    ng-view

  script(src='js/lib/angular/angular.js')
  script(src='js/lib/angular/angular-animate.js')
  script(src='js/lib/angular/angular-route.js')
  script(src='js/app.js')
  script(src='js/services.js')
  script(src='js/controllers.js')
  script(src='js/filters.js')
  script(src='js/directives.js')

CSS

ng-view {
  display: block;
  border: 1px dashed black;
  width: 300px;
  height: 300px;
  position: absolute;
  top: 20%;
}

.ng-enter {
  -webkit-animation: enter 1s cubic-bezier(.17,.67,.83,.67);
  animation: enter 1s cubic-bezier(.17,.67,.83,.67);
}

.ng-leave {
  -webkit-animation: enter 1s ease-out reverse;
  animation: enter 1s ease-out reverse;
}

[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

@-webkit-keyframes enter {
  0% {
    background: #f80;
    top: 100%;
  }
  70% {
    background: #f08;
  }
  100% {
    background: #8f8;
    top: 20%;
  }
}

@keyframes enter {
  0% {
    background: #f80;
    top: 100%;
  }
  70% {
    background: #f08;
  }
  100% {
    background: #8f8;
    top: 20%;
  }
}

Answer 1

这可能与您尝试的内容无关，但您是否尝试过以下内容？

body(ng-controller="IndexCtrl as main" ng-cloak='ng-cloak')

这可能是您正在寻找的。