Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to kill image flash in AngularJS
    primarykey
    data
    text
    <p>I'm trying to use AngularJS built-in directives to achieve some simple JS effect without writing actual js code. It actually works pretty well, except the initial flash.</p> <p>I know to deal with text, people should use <code>ng-bind</code> instead of <code>{{}}</code></p> <p>But how do you deal with directives like <code>ng-if</code>?</p> <p>Here is my code:</p> <pre><code>&lt;li ng-if="!magazines.resolved"&gt; &lt;!-- add "&amp;&amp; isOwner" when done --&gt; &lt;dl&gt; &lt;dt ng-model="changeToActivation" ng-init="changeToActivation=false" ng-mouseover="changeToActivation=true" ng-mouseleave="changeToActivation=false"&gt;&lt;img ng-if="!changeToActivation" ng-src="&lt;?php echo base_url('public/images/system_icons/add_magazine.jpg');?&gt;"&gt; &lt;img ng-click="addMagazine()" id="activated" ng-if="changeToActivation" ng-src="&lt;?php echo base_url('public/images/system_icons/add_magazine_activated.jpg');?&gt;"&gt;&lt;/dt&gt; &lt;dd class="magazineName"&gt;Create &lt;br&gt; A new magazine&lt;/dd&gt; &lt;dd class="publishDate"&gt;Now!&lt;/dd&gt; &lt;/dl&gt; &lt;/li&gt; </code></pre> <p>I know it gets a bit hard to read, but it's very easy. There is a model defined on <code>&lt;dt&gt;&lt;/dt&gt;</code> tag. If mouse is over this tag, the model value becomes true; when leaves, it becomes false.</p> <p>Based on this boolean model value, one or the other image will be shown.</p> <p>It works like a charm, but I can see both images at the very beginning, flashing!</p> <p>How to deal with something like this then?</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload