Directives
Lesson 1 of 1
  1. 1
    Here’s an AngularJS app for a mobile app store: In the controller *MainController.js, there are three objects $scope.move, $scope.shutterbugg, and $scope.gameboard that each contain info about…
  2. 2
    What did we just do? We wrote code to teach the browser a new HTML element , and used it in the view to display each app’s details. First in js/directives/appInfo.js, we made a new _directive…
  3. 3
    Why is creating your own directives useful? 1. Readability. Directives let you write expressive HTML. Looking at index.html you can understand the app’s behavior just by reading the HTML. …
  4. 4
    We know that AngularJS comes with a few built-in directives like ng-repeat and ng-click. We’ve seen that AngularJS makes it possible to create your own custom directives, such as . We can use An…
  5. 5
    Directives are a core feature of AngularJS. So far we’ve used custom directives to simply display static content, but they can do more than this. It’s possible to bake interactivity into directives…
  6. 6
    We used app.directive to create a new directive named ‘installApp’. The directive contains the three options restrict, scope, and templateUrl that we saw before in the ‘appInfo’ directive. It a…
  7. 7
    The template uses Angular’s built-in ng-click directive. When the button is clicked, ng-click will tell AngularJS to run the download() function in the directive. The download() function uses the …
  8. 8
    Well done! An “Install” button now shows up under each app. When you click the button, it changes to an “Uninstall” button. When you click it again, it changes back to an “Install” button. What ca…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo