Custom directives in Angular are like secret weapons for developers. They let you create reusable components that can do some pretty cool stuff. I remember when I first learned about them - it was like unlocking a whole new level in my coding skills.

Let’s dive into advanced custom directives and see how they can make our lives easier. These bad boys are highly configurable and come with controllers, transclusion, and two-way data binding. It’s like having a Swiss Army knife for your UI components.

First up, let’s talk about controllers in directives. They’re the brains of the operation, handling all the logic and data manipulation. Here’s a simple example of a directive with a controller:

app.directive('myCustomDirective', function() {
  return {
    restrict: 'E',
    template: '<div>{{ message }}</div>',
    controller: function($scope) {
      $scope.message = 'Hello from my custom directive!';
    }
  };
});

This directive creates an element that displays a greeting message. The controller sets the message, but we could make it do much more complex things if we wanted.

Now, let’s talk about transclusion. It’s a fancy word that basically means you can insert content from the parent scope into your directive. It’s super useful when you want to create wrapper components. Here’s how it works:

app.directive('myWrapper', function() {
  return {
    restrict: 'E',
    transclude: true,
    template: '<div class="wrapper"><ng-transclude></ng-transclude></div>'
  };
});

You can use this directive like this:

<my-wrapper>
  <p>This content will be wrapped!</p>
</my-wrapper>

The result will be a div with the class “wrapper” containing the paragraph. It’s like magic!

Two-way data binding is another powerful feature of custom directives. It allows the directive to both read and write to a property in the parent scope. This is great for creating interactive components. Let’s see an example:

app.directive('myCounter', function() {
  return {
    restrict: 'E',
    scope: {
      count: '='
    },
    template: '<button ng-click="increment()">Count: {{ count }}</button>',
    controller: function($scope) {
      $scope.increment = function() {
        $scope.count++;
      };
    }
  };
});

You can use this directive in your HTML like this:

<my-counter count="myCount"></my-counter>

The count will be synced between the parent scope and the directive. Clicking the button will increment the count, and the change will be reflected in both places.

Now, let’s create a more complex, reusable directive. How about a customizable modal? This is something I’ve found super useful in many projects:

app.directive('myModal', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {
      title: '@',
      onClose: '&'
    },
    template: `
      <div class="modal">
        <div class="modal-header">
          <h2>{{ title }}</h2>
          <button ng-click="close()">×</button>
        </div>
        <div class="modal-body" ng-transclude></div>
      </div>
    `,
    controller: function($scope) {
      $scope.close = function() {
        $scope.onClose();
      };
    }
  };
});

This modal directive is pretty flexible. You can set the title and provide a close function, and the content is transcluded. You’d use it like this:

<my-modal title="Welcome!" on-close="closeModal()">
  <p>Welcome to my awesome app!</p>
</my-modal>

Custom directives can also be used to create complex form elements. Let’s make a star rating component:

app.directive('starRating', function() {
  return {
    restrict: 'E',
    scope: {
      rating: '=',
      max: '@',
      onRatingSelect: '&'
    },
    template: `
      <ul class="star-rating">
        <li ng-repeat="star in stars track by $index" 
            ng-class="star" 
            ng-click="setRating($index + 1)">
          &#9733;
        </li>
      </ul>
    `,
    link: function(scope, element, attributes) {
      scope.max = scope.max || 5;
      
      function updateStars() {
        scope.stars = [];
        for (var i = 0; i < scope.max; i++) {
          scope.stars.push({
            filled: i < scope.rating
          });
        }
      }
      
      scope.setRating = function(index) {
        scope.rating = index;
        scope.onRatingSelect({rating: index});
      };
      
      scope.$watch('rating', function(oldVal, newVal) {
        if (newVal) {
          updateStars();
        }
      });
    }
  };
});

This star rating component allows you to set a maximum number of stars and provides a callback when a rating is selected. You’d use it like this:

<star-rating rating="myRating" max="10" on-rating-select="saveRating(rating)"></star-rating>

Custom directives can also be used to create entire layout systems. Here’s a simple grid system:

app.directive('grid', function() {
  return {
    restrict: 'E',
    transclude: true,
    template: '<div class="grid" ng-transclude></div>'
  };
});

app.directive('gridRow', function() {
  return {
    restrict: 'E',
    transclude: true,
    template: '<div class="grid-row" ng-transclude></div>'
  };
});

app.directive('gridCol', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {
      size: '@'
    },
    template: '<div class="grid-col" ng-class="\'col-\' + size" ng-transclude></div>'
  };
});

You could use this grid system like this:

<grid>
  <grid-row>
    <grid-col size="6">Column 1</grid-col>
    <grid-col size="6">Column 2</grid-col>
  </grid-row>
</grid>

These are just a few examples of what you can do with custom directives in Angular. The possibilities are endless! You can create tabs, accordions, complex forms, data visualizations - pretty much anything you can think of.

One thing I’ve learned from working with custom directives is that they’re incredibly powerful, but with great power comes great responsibility. It’s easy to go overboard and create directives for everything. In my experience, it’s best to use them for truly reusable components that encapsulate complex behavior or markup.

Also, remember to keep your directives focused. Each directive should do one thing and do it well. If you find your directive doing too many things, it might be time to split it into multiple directives.

Lastly, don’t forget about testing! Directives can be tested just like any other part of your Angular app. Writing tests for your directives will help ensure they work correctly and make it easier to refactor them in the future.

Custom directives are a powerful tool in the Angular developer’s toolkit. They allow you to create reusable, configurable components that can significantly reduce code duplication and improve the maintainability of your application. Whether you’re building a simple widget or a complex UI component, custom directives have got you covered. So go forth and directive-ify your Angular apps!

---