ng-show 的 Angular 初始转换，使用 $timeout 和 $compile
Posted
技术标签:
【中文标题】ng-show 的 Angular 初始转换，使用 $timeout 和 $compile【英文标题】：Angular initial transition of ng-show, using $timeout and $compile 【发布时间】：2018-01-11 05:50:11 【问题描述】：我有一个使用$compile 将一些html 附加到DOM 的服务。该 HTML 包含一个 ng-show，带有用于显示和隐藏的转换，它以一个虚假条件开头。问题是当它附加到 DOM 时，它会显示隐藏转换。我怎样才能避免它？我注意到我的控制器在 $timeout 内调用此服务，然后才发生不希望的转换。
https://plnkr.co/edit/og0wrp6rZ65StXbufqLI?p=preview
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))
)
)).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
*/<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>【问题讨论】：
你想达到什么目的？如果我加载页面，复选框是否可见？如果你只是设置 scope.checked = true;它将是可见的，并且不会播放虚假动画 【参考方案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
【讨论】：
这并没有为我解决问题。我想是因为使用了ng-cloak css
我不确定您的意思，如果您不希望在渲染页面时显示 div，这可以解决问题吗？不是吗？ :-)
在我提供的示例中，它是在页面呈现时，但在我的服务中，我在页面呈现后一点点附加元素【参考方案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 的 Angular 初始转换，使用 $timeout 和 $compile的主要内容，如果未能解决你的问题，请参考以下文章
Angular：ng-model 和 ng-show 不起作用
如何使用 Angular ui 路由器 ng-hide 和 ng-show 视图？