Question

我有以下angularjs应用程序从Instagram加载内容，但是，在页面加载时，我希望通过平滑过渡淡化加载的内容。

我将{{ loadedClass }}添加到主HTML标记中，但在加载时似乎没有将ng-enter放入其中：

HTML

  <script src="bower_components/angular/angular-animate.js"></script>
    <section ng-controller="ShowImages as images" class="page {{ loadedClass }}" ng-view>

CSS

.page.ng-leave {
  -webkit-animation: fadeOut 0.6s both ease-in;
  -moz-animation: fadeOut 0.6s both ease-in;
  animation: fadeOut 0.6s both ease-in;
}

/* line 697, ../sass/app.scss */
.page.ng-enter {
  -webkit-animation: fadeIn 2s both ease-in;
  -moz-animation: fadeIn 2s both ease-in;
  animation: fadeIn 2s both ease-in;
}

**控制器

 var app = angular.module('instafeed', ['ngAnimate']);
    app.filter('getFirstCommentFrom',function(){
  return function(arr, user){
    for(var i=0;i<arr.length;i++)
    {
      if(arr[i].from.username==user)
        return arr[i].text;
    }
    return '';
  }
})

我做错了什么？

见这里： http://machinas.com/wip/machinas/instagramfeed/

我收到此控制台错误：

Error: [$injector:unpr] Unknown provider: $$qProvider <- $$q <- $animate <- $compile
http://errors.angularjs.org/1.2.22/$injector/unpr?p0=%24%24qProvider%20%3C-%20%24%24q%20%3C-%20%24animate%20%3C-%20%24compile


return new Error(message);

Answer 1

课程＆＃39;页面＆＃39;应该继续你的每个项目，而不是容器：

<ul ng-show="layout == 'grid'" class="page grid"> 
    <li></li>
</ul>

这是您更改标签时进出的ul，而不是section

Answer 2

了解事件的工作原理，您的ng-view与ng-controller处于同一级别，因此当事件发出时，它不会“看到”它。当事件发出时，它们会被发送给它的父母。

我在您的HTML中建议以下内容：

<section ng-controller="ShowImages as images" class="page {{ loadedClass }}" >
    <div ng-view>
        <!-- The rest of your code -->
    </div>
</section>

修改

抱歉，我误导了你。我将$emit与$broadcast混淆了。

编辑2

查看HTML，您没有正确使用ng-views。 ng-views应该与路由一起使用。这就解释了为什么事件没有解雇。在您的代码中，您根本没有加载视图。

编辑3

研究动画ng-cloak指令;没有视图，你将能够获得几乎相同的结果。您要做的事情并不是很复杂，而且您似乎已经开始了，所以我建议您暂时跳过ng-view：）

当内容加载angularjs时，ng-enter不加载

2 个答案: