Book Image

AngularJS Directives Cookbook

By : Fernando Monteiro, Jan Carlo Viray, Dror Elovits, Juri Strumpflohner, Gabriel Schenker
Book Image

AngularJS Directives Cookbook

By: Fernando Monteiro, Jan Carlo Viray, Dror Elovits, Juri Strumpflohner, Gabriel Schenker

Overview of this book

AngularJS directives are at the center of what makes it such an exciting – and important - web development framework. With directives, you can take greater control over HTML elements on your web pages – they ‘direct’ Angular’s HTML compiler to behave in the way you want it to. It makes building modern web applications a much more expressive experience, and allows you to focus more closely on improving the way that user interaction impacts the DOM and the way your app manages data. If you’re already using Angular, you probably recognize the power of directives to transform the way you understand and build your projects – but customizing and creating your own directives to harness AngularJS to its full potential can be more challenging. This cookbook shows you how to do just that – it’s a valuable resource that demonstrates how to use directives at every stage in the workflow. Packed with an extensive range of solutions and tips that AngularJS developers shouldn’t do without, you’ll find out how to make the most of directives. You’ll find recipes demonstrating how to build a number of different user interface components with directives, so you can take complete control over how users interact with your application. You’ll also learn how directives can simplify the way you work by creating reusable directives – by customizing them with Yeoman you can be confident that you’re application has the robust architecture that forms the bedrock of the best user experiences. You’ll also find recipes that will help you learn how to unit test directives, so you can be confident in the reliability and performance of your application. Whether you’re looking for guidance to dive deeper into AngularJS directives, or you want a reliable resource, relevant to today’s web development challenges, AngularJS Directives Cookbook delivers everything you need in an easily accessible way.
Table of Contents (16 chapters)
AngularJS Directives Cookbook
About the Author
About the Reviewers

Creating the jQuery UI droppable directive

As we saw in the previous example, a draggable component may be more useful using another component known as a droppable. We'll look at a way to practice combining them.

The final result will be similar to the following images:

Now the draggable and droppable combined:

Getting ready

We are using the same code base as in the previous example.

How to do it…

  1. Add the following code to the homeCtrl.js file, right after the draggable directive:

    .directive('droppable', function () {
      return {
        restrict: 'A',
        scope: {},
          link: function (scope, elem, attrs) {
              activeClass: "ui-state-default",
              hoverClass: "ui-state-hover",
              drop:function(event,ui) {
                $(this).addClass( "ui-state-highlight" )
                .find( "p" )
                .html( "Dropped!" );
  2. Add the following HTML content to the home.html file, right after the draggable content:

    <div class...