CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Bunyk
Bunyk

Reputation: 8067

Angular directive instead of ng-include

I have following code: 

angular.module('app')
    .directive('directiveA', function () {
          return {
            templateUrl: '/template-a.html'
          };
        }
    )
    .directive('directiveB', function () {
          return {
            templateUrl: '/template-b.html'
          };
        }
    )
    .directive(// I hope you got the point.

That code is not very DRY, and I'd prefer to use ng-include, but those directives are very nice, like footer, header, flash-messages, etc. and allow to write very readable HTML, so probably it is better to have them.

Could I somehow add to angular.module additional method, something like viewDirective, to describe directives in this way:

angular.module('app')
    .viewDirective('directiveA', '/template-a.html')
    .viewDirective('directiveB', '/template-b.html')
    ...

Could I add it to angular.module.prototype, or is there better way to expand module methods? Is something like that already implemented in angular, so I don't invent the wheel? Or is it better to use ng-include?

Upvotes: 2

Views: 103

Answers (1)

haimlit
haimlit

Reputation: 2582

If you keep your directive name and path convention, you can do the following:

var directiveNames = ['a', 'b', 'c'];
_.forEach(directiveNames, function (name) {
    angular.module('app').directive(name, function () {
        return {
            templateUrl: '/' + name + '.html'
        }
    )
 });

You can find references to angular itself creating their own directives with DRY principles programmatically here: https://github.com/angular/angular.js/blob/d077966ff1ac18262f4615ff1a533db24d4432a7/src/ng/directive/ngEventDirs.js (line 49)

Upvotes: 2

Related Questions