Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
An AngularJS Directive via Isolated Module JavaScript
(function() {
An AngularJS Directive via Isolated Module JavaScript
This is just a simple example of an AngularJS module that defines a
directive within an immediately invoked function expression, which can
be stored in and loaded from a separate file for clear, lean code
organization and easy distribution.
Brian Sexton
bdsexton's Gists
Script-loading in HTML:
<script src="path/to/angularjs-directive-module.js"></script>
Dependency-declaration in AngularJS app-module declaration:
angular.module("yourAppModule", ["demoModule"]);
Directive example in valid HTML5:
<p data-random-greeting></p>
If "scope" is not set for the directive, it will default to false and
the same greeting value will be used for all instances of the directive.
angular.module("demoModule", [])
.directive("randomGreeting", function() {
var greetings = ["Hello!", "Hi!", "Hiya!", "Hail!", "Sup?", "What?!", "Hola!", "Bonjour!", "I used to be an adventurer like you. Then I took an arrow in the knee."];
return {
scope: true,
template: "{{greeting}}",
controller: function($scope) {
$scope.greeting = greetings[Math.floor(Math.random() * greetings.length)];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.