Question

按照ngInclude ngAnimate和script的{{3}}中的示例，我对其进行了简单修改，以便从 <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> 标记加载模板而不是网址。

AngularJS docs

问题在于，如果我们定义内联模板，就像这样：

 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>

{{1}}

Answer 1

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

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

Angular：ng当模板内联定义为text / ng-template时，包括不触发首先输入动画

AngularJS docs

1 个答案: