Built-in and Custom Directives, question 3. Help, please!


#1

I don't understand what they mean by adding ng-repeat to the div class="card"... does it mean to add it within the brackets with the div or have it between the opening and closing of the div? The example at the top of the page in the instructions doesn't really help.


#2

I'm stuck at the same exercise. I don't understand what info attribute I should place in my <appinfo>.

I apologise for my english by the way, it is not my native language


#3

as far as I know it should work with ..

<div class="card" ng-repeat="app in apps">
          <app-info info="app"></app-info>

give it a try.. and put this code at the very top of the first .card div. so the compiler will take it!


#4

Thanks! for the help. I was making it harder than it needed to be.


#5

Tried that, and it still does not work. How does one get past this step?


#6

Why don't we need expression here. For example below code will not work

<div class="card" ng-repeat="app in apps">
   <app-info info="{{app}}"></app-info>
</div>

#7

I've got the same code that appears to be correct but it will not pass -- the most frustrating aspect is the error message to be sure to add 'ng-repeat' to a card class; I clear have that! Help!


#8

I put in the code below and it worked for me. Make sure it's in the very first instance of the card div in the html file.


#9

you need to remove the previous cards which are not having ng-repeat element. Hope this helps :smile:


#14

Thats it!! The error that it shows when you didn't remove the other .card divs is because the DOM reads the first .card div and didn't find the ng-repeat directive. Hope that will help others to understand better the way it works. At least it helps me!! :smile:


#15

Can someone explain why using info = "app" works? how can info identify the app by itself?


#16

I'm trying to figure that out, too. After thinking about it for a while, and considering what is happening behind the scenes, here's my best explanation for why it works this way. Let's start with this example:

<div class="card">
     <app-info info="shutterbugg"></app-info>
</div>

<div class="card">
     <app-info info="gameboard"></app-info>
</div>

In the app-info directive we're instructing Angular to initialize the code block's scope using the name of the object. In this case, the objects shutterbugg and gameboard.

When we use the ng-repeat directive, we're setting up the same thing, but passing in the value of app, an object:

<div class="card" ng-repeat="app in apps">
     <app-info info="app"></app-info>
</div>

If you modify the code slightly, you can check to see what app's value is:

<div class="card" ng-repeat="app in apps">
     {{ app }}
</div>

// example response
// {"icon":"img/shutterbugg.jpg","title":"Shutterbugg","developer":"Chico Dusty","price":2.99}

So app in this case appears to the be the same as shutterbugg. If you try to use info="{{ shutterbug }}" it will fail, the same as using info="{{ app }}" will. Presumably in this case app === shutterbugg, and Angular is smart enough to recognize that "app" means the object represented by the variable app and not the string of characters that happen to form the word "app".

Now, I'm still a neophyte at this, so the fundamental "why" of the situation still eludes me, but I think I've been able to convince myself of how it works. Hopefully I'm close enough that this won't utterly confuse people :slightly_smiling: If it is wrong I'm happy to rework the explanation to make it correct.


#17

when using 'ng-repeat="app in apps"' directive, you declare 'app' as a single variable for each unit in apps. The value of app is every index of apps.


#18

Totally makes sense to me, thank you for the detailed explanation!


#19

I am stuck here. instruction 2 doesn't get a tick mark. Though i have added two more objects to the array like this
$scope.apps = [
{
icon: 'img/move.jpg',
title: 'MOVE',
developer: 'MOVE, Inc.',
price: 0.99
},
{
icon: 'img/shutterbugg.jpg',
title: 'Shutterbugg',
developer: 'Chico Dusty',
price: 2.99
},
{
icon: 'img/gameboard.jpg',
title: 'Gameboard',
developer: 'Armando P.',
price: 1.99
},
{
icon: 'img/forecast.jpg',
title: 'Forecast',
developer: 'Forecast',
price: 1.99
}
]

I also get port in use error why does this occur is my code correct ?


#20

I get the following errorHide error.[33mWARN [karma]: [39mPort 9876 in use]


#21

Where the ■■■■ did we declare anything called "app in apps" ? ;s
That's what threw me off on this part


#22

redliquid, I'm pretty sure you use "app in apps" because apps is defined inside of app. I'm not sure why it's it's app in apps instead of app in apps, but I'm pretty sure the general idea still holds.


#23

why it should be the first instance of card div?????


#24

I am also wondering why this ng-repeat div should be the very first instance of the card div. I moved my div with the ng-repeat up so that its the first instance of the card div and it worked, but I don't know why it didn't work otherwise. Just a hunch: Is there a certain priority ordering/preference for handling elements with ng-repeat before those without them?