VisaSpark
Sign in
advanced18 min

Custom Directives

How a custom AngularJS directive is defined, and reading one in existing code.

What you'll learn

  • Explain what a directive definition object's restrict and link properties control
  • Read an existing custom directive and identify its element scope and DOM-manipulation logic
  • Recognize why custom directives are one of the harder parts of legacy AngularJS code to read

Explanation

Beyond the built-in directives (ng-if, ng-repeat, ng-model), AngularJS lets you define custom directives for reusable DOM behavior: app.directive("myHighlight", function() { return { restrict: "A", link: function(scope, element, attrs) { element.css("background", "yellow"); } }; });, used as <p my-highlight>Text</p>.

The returned directive definition object's restrict property controls how the directive can be used in markup: "A" (attribute, e.g. my-highlight), "E" (element, e.g. <my-highlight>), "C" (class), or a combination like "AE". The link function is where the actual DOM manipulation/event-wiring happens, given the directive's own isolated (or inherited) scope, the jqLite/jQuery-wrapped element, and the element's attrs.

Custom directives are genuinely one of the harder parts of legacy AngularJS code to read, because they mix template-declarative usage (<p my-highlight>) with imperative DOM manipulation inside link -- when investigating unfamiliar behavior on a page, checking whether an unusual HTML attribute maps to a custom directive (not a built-in one) is a common, useful step before assuming a bug is somewhere else entirely.

Guided lab

Predict: A custom directive's link function effect

AngularJSNot executed
This lab does not run in your browser or on VisaSparkSchools's servers. Read the code, predict what it does, then reveal the real expected output.

This models a custom directive's link function as a plain function applied to an element's style object (this platform doesn't render real AngularJS directives). Predict the element's background after linking.

// Modeling: app.directive("myHighlight", () => ({ restrict: "A", link: (scope, element) => {...} }))
const element = { style: { background: "white" } };

function myHighlightLink(scope, element) {
  element.style.background = "yellow";
}

myHighlightLink(null, element);
console.log(element.style.background);

Stuck? Get a hint.

Common mistakes

  • Not recognizing an unfamiliar HTML attribute as a reference to a custom directive, and searching for the bug in the wrong place entirely.
  • Confusing restrict: 'A' (attribute usage) with restrict: 'E' (element usage) when reading or writing a directive's markup usage.
  • Assuming all DOM manipulation in an AngularJS app happens through ng-* built-ins -- custom directives' link functions often do direct DOM manipulation too.

Knowledge check

Knowledge check

1. What does a directive definition object's `restrict: "A"` mean?
2. Where does a custom directive's DOM manipulation typically happen?
3. Why are custom directives often harder to read than built-in ones in legacy code?

Takeaway

When investigating unfamiliar page behavior, check whether an unusual HTML attribute maps to a custom directive before assuming the bug is elsewhere.

Summary

Custom directives extend AngularJS's template vocabulary; restrict controls usage form (attribute/element/class), and link performs the actual DOM manipulation.

References

Your notes

Notes save automatically.

Finished this lesson?

Mark it complete to track your progress and schedule a future review.

Next: Services and Factories →