Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 454bcfa

Browse files
ProLoserjeffbcross
authored andcommitted
docs(directive): Clarified and cleaned up directive guide
- corrected terminology about how directives use `require` - added more variations to the DirectiveDefinitionObject - removed some slightly superfluous text docs(directive): Minor correction to example to avoid bad practice Anchor tags should use `ng-href` instead of `href` for interpolation. docs(directive): Supplementing DDO description DDO = Directive Definition Object Tweak recommended here: https://github.com/angular/angular.js/pull/2888/files#r4664565
1 parent 1dcafd1 commit 454bcfa

File tree

1 file changed

+32
-39
lines changed

1 file changed

+32
-39
lines changed

docs/content/guide/directive.ngdoc

+32-39
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ api/ng.$rootScope.Scope#$digest digest} cycle. An example of interpolation is sh
6363
here:
6464

6565
<pre>
66-
<a href="img/{{username}}.jpg">Hello {{username}}!</a>
66+
<a ng-href="img/{{username}}.jpg">Hello {{username}}!</a>
6767
</pre>
6868

6969

@@ -263,29 +263,38 @@ Here's an example directive declared with a Directive Definition Object:
263263
myModule.directive('directiveName', function factory(injectables) {
264264
var directiveDefinitionObject = {
265265
priority: 0,
266-
template: '<div></div>',
267-
templateUrl: 'directive.html',
266+
template: '<div></div>', // or // function(tElement, tAttrs) { ... },
267+
// or
268+
// templateUrl: 'directive.html', // or // function(tElement, tAttrs) { ... },
268269
replace: false,
269270
transclude: false,
270271
restrict: 'A',
271272
scope: false,
272-
controller: ["$scope", "$element", "$attrs", "$transclude", "otherInjectables",
273-
function($scope, $element, $attrs, $transclude, otherInjectables) { ... }],
273+
controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
274+
require: 'siblingDirectiveName', // or // ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent'],
274275
compile: function compile(tElement, tAttrs, transclude) {
275276
return {
276277
pre: function preLink(scope, iElement, iAttrs, controller) { ... },
277278
post: function postLink(scope, iElement, iAttrs, controller) { ... }
278279
}
280+
// or
281+
// return function postLink( ... ) { ... }
279282
},
280-
link: function postLink(scope, iElement, iAttrs) { ... }
283+
// or
284+
// link: {
285+
// pre: function preLink(scope, iElement, iAttrs, controller) { ... },
286+
// post: function postLink(scope, iElement, iAttrs, controller) { ... }
287+
// }
288+
// or
289+
// link: function postLink( ... ) { ... }
281290
};
282291
return directiveDefinitionObject;
283292
});
284293
</pre>
285294

286295
In most cases you will not need such fine control and so the above can be simplified. You can still
287-
return a Directive Definition Object, but only setting the 'compile' function property of the Object,
288-
and rely on the default values for other properties.
296+
return a Directive Definition Object, but only setting the 'link' function property of the Object,
297+
and rely on the default values for other properties.
289298

290299
Therefore the above can be simplified as:
291300

@@ -294,24 +303,11 @@ Therefore the above can be simplified as:
294303

295304
myModule.directive('directiveName', function factory(injectables) {
296305
var directiveDefinitionObject = {
297-
compile: function compile(tElement, tAttrs) {
298-
return function postLink(scope, iElement, iAttrs) { ... }
299-
}
306+
link: function postLink(scope, iElement, iAttrs) { ... }
300307
};
301308
return directiveDefinitionObject;
302-
});
303-
</pre>
304-
305-
Finally, most directives concern themselves only with instances, not with template transformations, allowing
306-
further simplification.
307-
308-
Here we only define the postLink function:
309-
310-
<pre>
311-
var myModule = angular.module(...);
312-
313-
myModule.directive('directiveName', function factory(injectables) {
314-
return function postLink(scope, iElement, iAttrs) { ... }
309+
// or
310+
// return function postLink(scope, iElement, iAttrs) { ... }
315311
});
316312
</pre>
317313

@@ -385,35 +381,32 @@ compiler}. The attributes are:
385381
by calling the `localFn` as `localFn({amount: 22})`.
386382

387383
* `controller` - Controller constructor function. The controller is instantiated before the
388-
pre-linking phase and it is shared with other directives if they request it by name (see
384+
pre-linking phase and it is shared with other directives (see
389385
`require` attribute). This allows the directives to communicate with each other and augment
390-
each other's behavior. The controller is injectable with the following locals:
386+
each other's behavior. The controller is injectable (and supports bracket notation) with the following locals:
391387

392388
* `$scope` - Current scope associated with the element
393389
* `$element` - Current element
394390
* `$attrs` - Current attributes object for the element
395391
* `$transclude` - A transclude linking function pre-bound to the correct transclusion scope:
396392
`function(cloneLinkingFn)`.
397393

398-
To avoid errors after minification the bracket notation should be used:
399-
400-
<pre>
401-
controller: ['$scope', '$element', '$attrs', '$transclude', function($scope, $element, $attrs, $transclude) { ... }]
402-
</pre>
403-
404-
* `require` - Require another controller be passed into current directive linking function. The
405-
`require` takes a name of the directive controller to pass in. If no such controller can be
406-
found an error is raised. The name can be prefixed with:
394+
* `require` - Require another directive and inject its controller as the fourth argument to the linking function. The
395+
`require` takes a string name (or array of strings) of the directive(s) to pass in. If an array is used, the injected
396+
argument will be an array in corresponding order. If no such directive can be
397+
found, or if the directive does not have a controller, then an error is raised. The name can be prefixed with:
407398

408-
* `?` - Don't raise an error. This makes the require dependency optional.
409-
* `^` - Look for the controller on parent elements as well.
399+
* (no prefix) - Locate the required controller on the current element.
400+
* `?` - Attempt to locate the required controller, or return `null` if not found.
401+
* `^` - Locate the required controller by searching the element's parents.
402+
* `?^` - Attempt to locate the required controller by searching the element's parents, or return `null` if not found.
410403

411404

412405
* `restrict` - String of subset of `EACM` which restricts the directive to a specific directive
413-
declaration style. If omitted directives are allowed on attributes only.
406+
declaration style. If omitted, the default (attributes only) is used.
414407

415408
* `E` - Element name: `<my-directive></my-directive>`
416-
* `A` - Attribute: `<div my-directive="exp"></div>`
409+
* `A` - Attribute (default): `<div my-directive="exp"></div>`
417410
* `C` - Class: `<div class="my-directive: exp;"></div>`
418411
* `M` - Comment: `<!-- directive: my-directive exp -->`
419412

0 commit comments

Comments
 (0)