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.

Let’s start creating another directive that reacts to a user’s click.



In the new file js/directives/installApp.js, create a new directive named installApp. Refer to the appInfo directive for an example:

  • use app.directive to create a new directive named installApp
  • use the restrict option to create a new Element
  • set the scope option to an empty object {}
  • use the templateUrl option to tell this directive to use the js/directives/installApp.html file

Include this new JavaScript file in index.html as a <script> element.


In the installApp directive, add a fourth option named link, and type in the following function:

function(scope, element, attrs) { scope.buttonText = "Install", scope.installed = false, scope.download = function() { element.toggleClass('btn-active'); if(scope.installed) { scope.buttonText = "Install"; scope.installed = false; } else { scope.buttonText = "Uninstall"; scope.installed = true; } } }

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?