AngularJS，ng-view + css3關鍵幀與玉模板 - ng-cloak不工作

我目前正在建立這個：https://github.com/btford/angular-express-blog位代碼，它使用nodeJS，Express，Jade和顯然AngularJS。在本文中，我正在運行最新版本的AngularJS。AngularJS，ng-view + css3關鍵幀與玉模板 - 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-斗篷和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%; 
    } 
}

來源

2013-12-19 Vorathe

-1

這可能與您所嘗試的內容不相關，但是您是否嘗試了以下方法？

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

這可能是你在找什麼。

來源

2014-10-19 01:29:16

AngularJS，ng-view + css3關鍵幀與玉模板 - ng-cloak不工作

回答

相關問題