1

我正在尝试使用 AngularJS 内置指令来实现一些简单的 JS 效果，而无需编写实际的 js 代码。它实际上工作得很好，除了最初的闪光。

我知道要处理文本，人们应该使用ng-bind而不是{{}}

但是你如何处理像这样的指令ng-if？

这是我的代码：

<li ng-if="!magazines.resolved"> <!-- add "&& isOwner" when done -->
        <dl>
          <dt ng-model="changeToActivation" ng-init="changeToActivation=false" ng-mouseover="changeToActivation=true" ng-mouseleave="changeToActivation=false"><img ng-if="!changeToActivation" ng-src="<?php echo base_url('public/images/system_icons/add_magazine.jpg');?>">
          <img ng-click="addMagazine()" id="activated" ng-if="changeToActivation"  ng-src="<?php echo base_url('public/images/system_icons/add_magazine_activated.jpg');?>"></dt>
          <dd class="magazineName">Create <br> A new magazine</dd>
          <dd class="publishDate">Now!</dd>
        </dl>
      </li>

我知道它有点难读，但它很容易。<dt></dt>标签上定义了一个模型。如果鼠标在这个标签上，模型值变为真；当离开时，它就变成了假的。

基于此布尔模型值，将显示一个或另一个图像。

它就像一个魅力，但我可以在一开始看到两个图像，闪烁！

那么如何处理这样的事情呢？

4

2 回答 2

5

ngCloak 可能会有所帮助，但您也应该使用 ng-src 作为实际图像源，这将防止您的站点在模型收到值之前加载图像。此外，在使用 ngCloak 时，您可能需要在 html 文件的顶部加载 AngularJS 源代码，因为它可能会在知道如何处理 ng-cloak 指令之前尝试加载图像。

于 2013-10-15T01:23:31.843 回答
0

将 ngCloak 应用于您dt应该为您解决问题：http://docs.angularjs.org/api/ng.directive: ngCloak

这是文档中的一个示例。请注意，它是在两个地方添加的——指令和类。只有 IE7 支持才需要该类。

 <div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div>
于 2013-10-15T00:28:57.670 回答