Step 4


I'm just confused by step 4. I don't really understand what it's saying. If someone could maybe elaborate or simplify it for me.

The programListing directive takes in information through the listing attribute. The data in listing becomes available to use in the directive's template. Update the expressions in the directive's template so that it uses listing to display each item.


It's a bit confusing, but it has to do with how we reach the controller's $scope from inside the directive's template. We can't just reference the contents of $scope in there.

When we made the directive, we defined a scope for the template like this:

app.directive("directiveName", function() {
    return {
        restrict: 'E',
        scope: { listing: '=' },
        templateUrl: 'bla/bla.js'

Angular uses some behind-the-scenes magic to link the controller's namespace with the template's. Thus, in the template we'll refer to the data in the controller's $scope using the keyword 'listing' instead of some other thing.

In other words, when using expressions inside directive templates, we must refer to how we defined the template's scope instead of how it's defined in the controller. Specifically for this exercise that means using {{ listing.fieldValue }} instead of {{ program.fieldValue }} when writing the expressions in the directive's template :slightly_smiling:

Hope that makes sense.