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

Posted 2023-02-19

【中文标题】AngularJS，ng-view + css3 关键帧与翡翠模板 - ng-cloak 不工作

【英文标题】：AngularJS, ng-view + css3 keyframes with jade template - ng-cloak not working

【发布时间】：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%;
  

【参考方案1】：

这可能与您正在尝试的内容无关，但您是否尝试过以下内容？

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

这可能是您正在寻找的。​​p>