Angular Directive as a Service

directive-as-a-service.js

angular.module('MyComponent', [])
  .service('MyComponent', function($log, $rootScope, $compile) {
    return function(params) {
      var scope;
      // Pass params through to a new'd up scope.
      // I'm just shoving them all in there as a property
      // but you could be more discreet.
      scope = $rootScope.$new();
      scope.params = params;
      var directive = $compile('<my-component>')(scope);
      return scope;
    }
  })
  .directive('myComponent', function() {
    return {
      restrict: 'E',
      controller: 'MyComponent',
      template: '<h2>My Component</h2>', //I usually pass these in via a JST var
      replace: true,
    };
  })
  .controller('MyComponent', function($scope, $log, $element) {
    // $scope.params are available
    $log.log('my component!', $scope.params);
    //You may wish to hook the $element back so it's accessible externally
    $scope.$element = $element;
  });


//Demo
angular.module('app', ['MyComponent']).controller('TestCtrl', function(MyComponent, $log) {
  var component = MyComponent({
    foo: 'bar'
  });
  $log.log(component.$element);
});