Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AngularJS Basics (1.x) Using Angular's Built In Directives Using ng-click To Change Application States

Snow Girl
seal-mask
.a{fill-rule:evenodd;}techdegree
Snow Girl
Full Stack JavaScript Techdegree Student 11,438 Points
Posted by Snow Girl
.a{fill-rule:evenodd;}techdegree
Snow Girl
Full Stack JavaScript Techdegree Student 11,438 Points

{{todo.name}} is flashing on refresh?

Is anyone else seeing the {{todo.name}} code flashing on refresh within the label in this lesson phase?

4 Answers

akak
akak
29,446 Points
akak
akak
29,446 Points

This sometimes happens and there is a angular directive to fix it. You can add ng-cloak in a div that flickers.

<div id="template2" ng-cloak>

and then in CSS

[ng-cloak] { 
    display: none;
}

Now the scope variables won't show up until they are rendered with data.

Antonio Jaramillo
Antonio Jaramillo
15,604 Points

Wow! Nice to know.

Saleh Jarad
Saleh Jarad
3,087 Points
Saleh Jarad
Saleh Jarad
3,087 Points

You can simply Change it like this: <h2>{{todo.name}}</h2> <--[To] --> <h2 data-ng-bind="todo.name"></h2>

Ve Ship
PLUS
Ve Ship
Courses Plus Student 17,996 Points
Ve Ship
Ve Ship
Courses Plus Student 17,996 Points

I also had this problem. The flashing was fixed when I removed the 'coolCtrl' controller from <div class="actions"> from the previous exercise in index.html.

  <div ng-controller="mainCtrl" class="list">
    <input ng-model="todo.completed" type="checkbox"/>
    <label ng-hide="editing" class="editing-label" ng-click="">{{todo.name}}</label>
    <input ng-show="editing" ng-model="todo.name" class="editing-label" type="text"/>
    <div class="actions">
        <a href="" ng-click="editing = !editing">edit</a>
        <a href="" ng-click="">save</a>
        <a href="" class="delete">delete</a>
    </div>
  </div>
Saleh Jarad
Saleh Jarad
3,087 Points
Saleh Jarad
Saleh Jarad
3,087 Points

Use > data-ng-bind="todo.name" inside the element. instead {{todo.name}}