AngularJS，ng-view + css3与jade模板的关键帧 – ng-cloak不起作用

我目前正在构build这个： https : //github.com/btford/angular-express-blog代码，它使用nodeJS，Express，Jade和显然AngularJS。 在本文中，我正在运行最新版本的AngularJS。

我遇到问题让ng-cloak（ http://docs.angularjs.org/api/ng.directive:ngCloak ）在我的应用程序中正常工作。 我的animation和路线是完美的工作，但吴斗篷不适合我。 任何时候我为模板开关设置animation，模板在animation之前会闪烁/闪烁。

我敢肯定，我已经完全按照文档中的描述来实现，所以对于我在做什么错误的任何洞察力将不胜感激。

模

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

这可能是你在找什么。