Learn
Directives
installApp I

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

1.

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
2.

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

3.

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; } } }
Folder Icon

Take this course for free

Already have an account?