【发布时间】:2014-01-07 11:19:16
【问题描述】:
我目前正在构建: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%;
}
}
【问题讨论】:
标签: javascript node.js angularjs express pug