In AngularJS, create lots of directives or use ng-controller?

This is a question about whether my coding style follows AngularJS best practices.

One of the selling points to Angular is directives. Directives allow you to create custom DOM with elements or attributes you create. I've found myself creating lots of directives, thinking of each one as little controls to be placed on the page. Looking back, I'm wondering if I'm too directive focused and if Angular directives should only be used when you need a custom link method?

What I find myself doing a lot is wrapping up some HTML in a directive with a simple controller that does one or two basic things. I have a lot of code that looks like this code of mine from a blog post:

'use strict';

angular.module('solrAngularDemoApp')
  .directive('searchResults', function () {
    return {
      scope: {
        solrUrl: '=',
        displayField: '=',
        query: '&',
        results: '&'
      },
      restrict: 'E',
      controller: function($scope, $http) {
        console.log('Searching for ' + $scope.query + ' at ' + $scope.solrUrl);
        $scope.$watch('query', function() {
          $http(
            {method: 'JSONP',
             url: $scope.solrUrl,
             params:{'json.wrf': 'JSON_CALLBACK',
                    'q': $scope.query,
                    'fl': $scope.displayField}
            })
            .success(function(data) {
              var docs = data.response.docs;
              console.log('search success!');
              $scope.results.docs = docs;

            }).error(function() {
              console.log('Search failed!');
            });
        });
      },
      template: '' +
                'Search Results for {{query}}' +
                '' +
                '  {{doc[displayField]}}'  +
                ''
    };
  });

So now I can think of my search results as a little widget to embed on the page:

OK Let's say I take the next step in my application and want to display more information about the individual documents fr

AngularJS encourages slim controllers. They'd rather you have fat directives and services than controllers.

I think you are absolutely correct to have many directives.

In my angular apps, I have some directives without link to make my templates clean and readable. You can compress trees of HTML into their high-level meaning. Plus, if things get more complex later on, you can add a link function and add functionality with relative ease, and you don't have to change code in multiple places. As a Rails developer, I believe in DRY (don't repeat yourself). The fewer places the same code is, the easier it is to maintain.

So, directive or ng-controller?

If you are going to reuse a "widget" in multiple places, directives are ideal!

If it's a one-off or the main feature of the page, you're probably better off making it a ng-controller.

StackExchange Code Review Q#30938, answer score: 6