AngularJS，ng-view+css3关键帧与翡翠模板-ng斗篷不工作

Question

我目前正在基于此构建：https://github.com/btford/angular-express-blog使用nodeJS、Express、Jade和AngularJS的代码。截至本文，我正在运行AngularJS的最新版本。

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

我确信我已经按照文档中的描述实现了这一点，所以如果能深入了解我做错了什么，我们将不胜感激。

模块

'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斗篷和class="ng斗篷"包含在身体标签中：

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斗篷添加到我的模板中，而不是像上面那样将其包含在主体中：

#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视图和脚本

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')

这可能就是你想要的。