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

我有一个服务，它使用$compile将一些HTML附加到DOM。此HTML包含一个ng show，其中包含一个用于显示和隐藏的转换，它以falsy条件开始。问题是当它连接到DOM时，它会显示隐藏转换。我怎样才能避免呢？我注意到我的控制器在$timeout内调用此服务，只有在不希望的转换发生时

有棱角的 .模块'app'，['ngAnimate'] .directive'compileNgShowAnimation'，$timeout，$compile=>{ 限制：'E'， 链接：范围，元素=>{ $timeout=>{ 有棱角的 .元素元素元素 .append$compile` 展示： 我应该仅在选中复选框时显示。 `范围 } } } .设置动画-显示-隐藏.ng-隐藏{ /*变换：translate3d0，-100%，0*/ 不透明度：0； } .为显示隐藏设置动画：不。ng-hide{ /*变换：translate3d0,0,0*/ 不透明度：1； } .animate-show-hide.ng-hide-add， .设置动画-show-hide.ng-hide-remove{ 过渡：全线性0.5s； } .检查元素{ 边框：1px纯黑； 填充：10px； } /* 2017谷歌公司版权所有。保留所有权利。 此源代码的使用受MIT风格的许可证管理，该许可证 可以在以下位置的许可证文件中找到：http://angular.io/license */

---

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

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

---

一个选项是通过向div添加ng hide类来确保元素在默认情况下是隐藏的：

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

这样你就不会有短暂的可视性

---

你想要实现什么？如果我加载页面，复选框是否可见？如果您刚刚设置scope.checked=true；它将是可见的，不会播放假动画。这并没有解决我的问题。我认为，由于使用了ng-Dope cssiam不确定您的意思，如果您不希望在呈现页面时显示div，这就解决了问题？不是吗-在我提供的示例中，是在页面呈现时，但在我的服务中，我在页面呈现后稍微添加了元素非常聪明，解决了页面呈现和页面呈现后的问题。