How to define a global directive that can work like ng-model?

Question

The most related question I can find on SO is " How to share a single Directive across multiple modules in AngularJS ". But I need something a little different. I need something that can work more or less like ng-model. The page does not need to have a named ng-app .

Here is the real problem I want to solve: I would like to define some template as samples that shows good accessibility. For example, the label for a required form field, should have arterisk (*). However, I don't want to force the users to define a named module in the JS file. Instead, they can just add ng-app (without name) to the html or body tag and include my JS file.

Answer 1

Your directive(s) is/are defined in an Angular module. I believe you have two choices to load such a module:

1. put ng-app="myModule" on an HTML element
2. manual bootstrap , hence no ng-app

Answer 2

You can add your directive directly to the ng module:

angular.module("ng")
    .directive("myDirective", function() {
        ...
})

But beware of potential name conflicts with new directives introduced by the angular team.