Question Mark in Directive Require

Question

I was following a tutorial trying to get a directive to work that required ngModel:

app.directive("contenteditable", function() {
    return {
        restrict: "A",
        require: "ngModel",
        /* etc. */

This failed to load saying:

Controller 'ngModel', required by directive 'contenteditable', can't be found!

Looking at similar code in the angular docs, I changed the require line:

require: "?ngModel"

Now it works fine. I'm guessing that the ? makes it optional but that doesn't make much sense to me. What is the question mark doing and (if it's not obvious) why is it allowing the directive to work?

Answer 1

Just to add more details for @Igor Pantovic answer about ^ prefix from AngularJS $compile guide:

• (no prefix) - Locate the required controller on the current element. Throw an error if not found.

• ? - Attempt to locate the required controller or pass null to the link fn if not found.

• ^ - Locate the required controller by searching the element and its parents. Throw an error if not found.

• ^^ - Locate the required controller by searching the element's parents. Throw an error if not found.

• ?^ - Attempt to locate the required controller by searching the element and its parents or pass null to the link fn if not found.

• ?^^ - Attempt to locate the required controller by searching the element's parents, or pass null to the link fn if not found.

Answer 2

It's exactly what you guessed: ? makes a directive optional.

Basically, these are at your disposal when defining directive requirements:

1. someDirective : Require someDirective on same element and pass it to linking function
2. ?someDirective : Pass someDirective controller if available on same element to linking function. If not, pass null.
3. ^someDirective : Require someDirective on one of the parent elements and pass it to linking function.
4. ?^someDirective : Pass someDirective controller if available on one of parent elements to linking function. If not, pass null.

If your directive requires multiple other directives, you can use the same thing but pass an array like so:

require: ['firstRequiredDirective', '^secondRequiredDirective'] 

This time, you will get an array of required directive's controllers passed to your linking function.

In your case, if element having your contenteditable directive has ngModel, ngModelController will get passed to your linking function.

If there is no ngModel directive on it, it will pass null.

Answer 3

You are correct that ? makes the required directive optional. Meaning that null will be returned in the link function of the directive for that requirement. The way you are using it states that ngModel maybe on the same element as contenteditable but it is not actually required.