javascript - Angular : ngInclude not triggering first enter animation when template is defined inline as text/ng-template

Question

按照 AngularJS docs 中的示例对于 ngInclude 和 ngAnimate ，我对其进行了简单的修改，以便从 script 标签而不是从 url 加载模板。

See Plunkr here

问题是如果我们定义内联模板，像这样:

   <!-- inline templates 
   Comment this to see the enter animation again:-->

   <script type="text/ng-template" id="template1.html">
       Content of template1.html defined inline
   </script>
   <script type="text/ng-template" id="template2.html">
       Content of template1.html defined inline
   </script>
   <!-- /templates -->

然后内容被正确添加，但第一个进入动画停止工作(虽然后续更改的动画似乎可以工作)。

这个问题有什么解决方法吗？

 angular.module('includeExample', ['ngAnimate'])
   .controller('ExampleController', ['$scope', function($scope) {
     $scope.templates =
       [ { name: 'template1.html', url: 'template1.html'},
         { name: 'template2.html', url: 'template2.html'} ];
     $scope.template = $scope.templates[0];
   }]);

  .slide-animate-container {
    position:relative;
    background:white;
    border:1px solid black;
    height:40px;
    overflow:hidden;
  }

  .slide-animate {
    padding:10px;
  }

  .slide-animate.ng-enter, .slide-animate.ng-leave {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;

    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:block;
    padding:10px;
  }

  .slide-animate.ng-enter {
    top:-50px;
  }
  .slide-animate.ng-enter.ng-enter-active {
    top:0;
  }

  .slide-animate.ng-leave {
    top:0;
  }
  .slide-animate.ng-leave.ng-leave-active {
    top:50px;
  }

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-animate.js"></script>
  

<div ng-app="includeExample">
   <div ng-controller="ExampleController">
   <select ng-model="template" ng-options="t.name for t in templates">
    <option value="">(blank)</option>
   </select>
   url of the template: <tt>{{template.url}}</tt>
   <hr/>
   <div class="slide-animate-container">
     <div class="slide-animate" ng-include="template.url"></div>
   </div>
   
  <!-- inline templates 
   Comment this to see the enter animation again: -->
   
   <script type="text/ng-template" id="template1.html">
       Content of template1.html defined inline
   </script>
   <script type="text/ng-template" id="template2.html">
       Content of template1.html defined inline
   </script>
   <!-- /templates -->
 </div>
</div>

Answer 1

digest 以某种方式触发了动画，所以试试这个:

$timeout(function() {
    $scope.template = $scope.templates[0];
}, 0);