What did we just do? We wrote code to teach the browser a new HTML element
<app-info>, and used it in the view to display each app’s details.
First in js/directives/appInfo.js, we made a new directive. We used
app.directive to create a new directive named
'appInfo'. It returns an object with three options:
restrictspecifies how the directive will be used in the view. The
'E'means it will be used as a new HTML element.
scopespecifies that we will pass information into this directive through an attribute named
=tells the directive to look for an attribute named
<app-info>element, like this:
The data in<app-info info="shutterbugg"></app-info>
infobecomes available to use in the template given by
templateUrlspecifies the HTML to use in order to display the data in
scope.info. Here we use the HTML in js/directives/appInfo.html.
Looking at js/directives/appInfo.html, we define the HTML to display details about an app, like its title and price. We use expressions and filters to display the data.
Then in index.html we use the new directive as the HTML element
<app-info>. We pass in objects from the controller’s scope (
$scope.shutterbugg) into the
info attribute so that it displays.
Click Next to continue.