javascript - AngularJS，带有jade模板的ng-view + css3关键帧-ng​​-cloak无法正常工作

我目前正在此基础上构建:ojit_一点点代码，它使用nodeJS，Express，Jade和显然的AngularJS。截至本文发布时，我正在运行AngularJS的最新版本。

我在让ng-cloak(https://github.com/btford/angular-express-blog)在我的应用中正常工作时遇到问题。我的动画和路线运行正常，但是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');
    };
  });

我尝试以几种方式在正文标签中包含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%;
  }
}

最佳答案

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

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

这可能是您要寻找的。