Question

我目前正在构建这个：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%;
  }
}

Answer 1

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

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

这可能就是你要找的东西。

AngularJS，ng-view + css3关键帧与玉模板 - ng-cloak无法正常工作

1 个答案: