【问题标题】:AngularJS, ng-view + css3 keyframes with jade template - ng-cloak not workingAngularJS,ng-view + css3 关键帧与翡翠模板 - ng-cloak 不工作
【发布时间】: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


    【解决方案1】:

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

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2012-06-30
      • 2017-02-07
      • 1970-01-01
      • 1970-01-01
      • 2019-09-16
      • 2017-09-30
      • 1970-01-01
      相关资源
      最近更新 更多