javascript - AngularJS .ng-enter 动画在第一次运行时不起作用

Question

我的 AngularJS 应用程序有一个奇怪的问题；我的选项卡幻灯片中的动画使用 ng-include 切换，第一次不起作用，但在第二次或第三次时效果很好。

这是我在 plunker 上的测试代码:http://embed.plnkr.co/a2x4vkTVgEUEt9mxWaVy/preview

看起来像 ng-enter 动画类，设置之前，模板上传。请帮忙。

Answer 1

看起来动画无法正常工作，因为您的模板加载顺序不正确。我建议使用指令或 ngRoute 来实现选项卡。

我在这里用 ngRoute 做了一个例子: http://embed.plnkr.co/RFw3CZwQmPz9doqe7o1u/preview

我不完全确定您的应用程序应该做什么，所以我可能破坏了您的初始设置。但我看到你使用了很多 rootScope。我建议使用一种服务来存储 Controller 之间的共享数据。像这样(使用此处的示例:Passing data between controllers in Angular JS?)

app.service('productService', function() {
  var productList = [];

  addProduct = function(newObj) {
      productList.push(newObj);
  };
  getProducts = function(){
      return productList;
  };
});

更新:可以在$routeProvider中使用动态templateUrls，like this .这也可以通过 Controller 实现。这样您就不必为每个步骤指定单独的路线。