Question

我有一个使用$compile将一些HTML附加到DOM的服务。这个HTML包含一个ng-show，其中包含显示和隐藏的转换，它以错误的条件开头。问题是当它附加到DOM时，它会显示隐藏转换。我怎么能避免呢？我注意到我的控制器在$timeout内调用了这个服务，然后只是出现了不希望的转换。

https://plnkr.co/edit/og0wrp6rZ65StXbufqLI?p=preview

＆＃13;

angular
  .module('app', ['ngAnimate'])
  .directive('compileNgShowAnimation', ($timeout, $compile) => ({
    restrict: 'E',
    link: (scope, element) => {
      $timeout(() => {
        angular
          .element(element)
          .append($compile(`
            <div>
              Show: 
              <input type="checkbox" ng-model="checked" aria-label="Toggle ngShow">
              <br />
              <div 
                class="check-element animate-show-hide"  
                ng-show="checked">
                I should show up only when the checkbox is checked.
              </div>
            </div>
          `)(scope))
      })
    }
  }))

＆＃13;

.animate-show-hide.ng-hide {
  /*transform: translate3d(0,-100%, 0);*/
  opacity: 0;
}

.animate-show-hide:not(.ng-hide) {
  /*transform: translate3d(0,0, 0);*/
  opacity: 1;
}

.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
  transition: all linear 0.5s;
}

.check-element {
  border: 1px solid black;
  padding: 10px;
}

/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
<body ng-app="app">

  <compile-ng-show-animation></compile-ng-show-animation>
  
</body>

＆＃13;

Answer 1

一个选项是通过将ng-hide类添加到div来确保隐藏元素：

<div class="check-element animate-show-hide ng-hide" ng-show="checked">
     I should show up only when the checkbox is checked.
</div>

然后你不会得到短暂的可见性

https://plnkr.co/edit/Ik3BflLHwu3DXglOMOhX?p=preview

Answer 2

您可以使用一个标志，以便在一段时间后应用类，如下所示：

angular
  .module('app', ['ngAnimate'])
  .directive('compileNgShowAnimation', ($rootScope, $compile, $document, $timeout) => ({
    restrict: 'E',
    link: (scope, element) => {
      $timeout(() => {
        scope.checked = false;
        scope.animate = false;

        angular
          .element(element)
          .append($compile(`
            <div>
              Show: 
              <input type="checkbox" ng-model="checked" aria-label="Toggle ngShow">
              <br />
              <div class="check-element {{animate ? 'animate-show-hide':''}}" ng-show="checked">
                I should show up only when the checkbox is checked.
              </div>
            </div>
          `)(scope))
      });
      $timeout(() => {

        scope.animate = true;
      },10);
    }
  }))

ng-show的角度初始转换，使用$ timeout和$ compile

2 个答案: