Learn

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.

Instructions

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

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

Or sign up using:

Already have an account?