Question

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

由于某些原因，ng-animate似乎没有触发ng-enter事件。所以我可以添加一个CSS动画。有什么不对吗？

HTML

 <section ng-controller="ShowImages as images" class="page {{ loadedClass }}" >
     <div ng-view>
      ......
     </div>

JS

(function(){
  //Place your own Instagram client_id below. Go to https://instagram.com/developer/clients/manage/ and register your app to get a client ID
  var client_id = '83aaab0bddea42adb694b689ad169fb1';
  //To get your user ID go to http://jelled.com/instagram/lookup-user-id and enter your Instagram user name to get your user ID
  var user_id = '179735937';

  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 '';
  }
})

  app.factory("InstagramAPI", ['$http', function($http) {
    return {
      fetchPhotos: function(callback){
        var endpoint = "https://api.instagram.com/v1/users/self/media/liked/";
        endpoint += "?access_token=179735937.83aaab0.e44fe9abccb5415290bfc0765edd45ad";
        endpoint += "&callback=JSON_CALLBACK";

        $http.jsonp(endpoint).success(function(response){
          callback(response.data);

        });
      }
    }
  }]);

  app.controller('ShowImages', function($scope, InstagramAPI){
      $scope.layout = 'grid';
      $scope.data = {};
      $scope.pics = [];

      $scope.$on('$viewContentLoaded', function(){
          $scope.loadedClass = 'page-feed';
      });

      InstagramAPI.fetchPhotos(function(data){
          $scope.pics = data;
          console.log(data)
      });
  });

})();

我还在HTML中链接到这些：

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular/angular-route.js"></script>
<script src="bower_components/angular/angular-animate.js"></script>

我做错了什么？

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

Answer 1

你是否包含了css文件？我想你不需要这个：

$scope.$on('$viewContentLoaded', function(){
          $scope.loadedClass = 'page-feed';
  });

当您设置在ng-repeat

中使用的var值时，ng-enter处于活动状态

查看此http://codepen.io/shprink/pen/Ariyc

ng-animate not firing event（ng-enter）

1 个答案: