5
私は現在、このコードを構築しています：nodeJS、Express、Jade、そして明らかにAngularJSを使用するhttps://github.com/btford/angular-express-blogビットのコード。私はこの記事の時点でAngularJSの最新バージョンを実行しています。AngledJS、ng-view + css3キーフレームとjadeテンプレート - ng-cloakが動作しない
私のアプリで正しく動作するには、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-マントとクラス= "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%;
}
}