-
Notifications
You must be signed in to change notification settings - Fork 27.4k
docs(directive): Clarified and cleaned up directive guide #2888
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -63,7 +63,7 @@ api/ng.$rootScope.Scope#$digest digest} cycle. An example of interpolation is sh | |
here: | ||
|
||
<pre> | ||
<a href="img/{{username}}.jpg">Hello {{username}}!</a> | ||
<a ng-href="img/{{username}}.jpg">Hello {{username}}!</a> | ||
</pre> | ||
|
||
|
||
|
@@ -263,29 +263,38 @@ Here's an example directive declared with a Directive Definition Object: | |
myModule.directive('directiveName', function factory(injectables) { | ||
var directiveDefinitionObject = { | ||
priority: 0, | ||
template: '<div></div>', | ||
templateUrl: 'directive.html', | ||
template: '<div></div>', // or // function(tElement, tAttrs) { ... }, | ||
// or | ||
// templateUrl: 'directive.html', // or // function(tElement, tAttrs) { ... }, | ||
replace: false, | ||
transclude: false, | ||
restrict: 'A', | ||
scope: false, | ||
controller: ["$scope", "$element", "$attrs", "$transclude", "otherInjectables", | ||
function($scope, $element, $attrs, $transclude, otherInjectables) { ... }], | ||
controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... }, | ||
require: 'siblingDirectiveName', // or // ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent'], | ||
compile: function compile(tElement, tAttrs, transclude) { | ||
return { | ||
pre: function preLink(scope, iElement, iAttrs, controller) { ... }, | ||
post: function postLink(scope, iElement, iAttrs, controller) { ... } | ||
} | ||
// or | ||
// return function postLink( ... ) { ... } | ||
}, | ||
link: function postLink(scope, iElement, iAttrs) { ... } | ||
// or | ||
// link: { | ||
// pre: function preLink(scope, iElement, iAttrs, controller) { ... }, | ||
// post: function postLink(scope, iElement, iAttrs, controller) { ... } | ||
// } | ||
// or | ||
// link: function postLink( ... ) { ... } | ||
}; | ||
return directiveDefinitionObject; | ||
}); | ||
</pre> | ||
|
||
In most cases you will not need such fine control and so the above can be simplified. You can still | ||
return a Directive Definition Object, but only setting the 'compile' function property of the Object, | ||
and rely on the default values for other properties. | ||
return a Directive Definition Object, but only setting the 'link' function property of the Object, | ||
and rely on the default values for other properties. | ||
|
||
Therefore the above can be simplified as: | ||
|
||
|
@@ -294,24 +303,11 @@ Therefore the above can be simplified as: | |
|
||
myModule.directive('directiveName', function factory(injectables) { | ||
var directiveDefinitionObject = { | ||
compile: function compile(tElement, tAttrs) { | ||
return function postLink(scope, iElement, iAttrs) { ... } | ||
} | ||
link: function postLink(scope, iElement, iAttrs) { ... } | ||
}; | ||
return directiveDefinitionObject; | ||
}); | ||
</pre> | ||
|
||
Finally, most directives concern themselves only with instances, not with template transformations, allowing | ||
further simplification. | ||
|
||
Here we only define the postLink function: | ||
|
||
<pre> | ||
var myModule = angular.module(...); | ||
|
||
myModule.directive('directiveName', function factory(injectables) { | ||
return function postLink(scope, iElement, iAttrs) { ... } | ||
// or | ||
// return function postLink(scope, iElement, iAttrs) { ... } | ||
}); | ||
</pre> | ||
|
||
|
@@ -385,35 +381,30 @@ compiler}. The attributes are: | |
by calling the `localFn` as `localFn({amount: 22})`. | ||
|
||
* `controller` - Controller constructor function. The controller is instantiated before the | ||
pre-linking phase and it is shared with other directives if they request it by name (see | ||
pre-linking phase and it is shared with other directives (see | ||
`require` attribute). This allows the directives to communicate with each other and augment | ||
each other's behavior. The controller is injectable with the following locals: | ||
each other's behavior. The controller is injectable (and supports bracket notation) with the following locals: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. "bracket notation"? Do you mean "inline injection annotation"? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yes, but I was worried people may not know what that means. I figure people see |
||
|
||
* `$scope` - Current scope associated with the element | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. why delete this phrase? You do need to "require" controllers by the name of the directive that creates it. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I was trying to make the documentation more concise. I figured the docs need to be simplified. within the scope of this property, all you're doing is publicizing the function. I figured it's more important to talk about how to PULL IN this function when discussiong |
||
* `$element` - Current element | ||
* `$attrs` - Current attributes object for the element | ||
* `$transclude` - A transclude linking function pre-bound to the correct transclusion scope: | ||
`function(cloneLinkingFn)`. | ||
|
||
To avoid errors after minification the bracket notation should be used: | ||
|
||
<pre> | ||
controller: ['$scope', '$element', '$attrs', '$transclude', function($scope, $element, $attrs, $transclude) { ... }] | ||
</pre> | ||
|
||
* `require` - Require another controller be passed into current directive linking function. The | ||
`require` takes a name of the directive controller to pass in. If no such controller can be | ||
found an error is raised. The name can be prefixed with: | ||
* `require` - Require another directive and inject it's _controller_ as the fourth argument to the linking function. The | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nice rewording There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Actually it should probably be 'another directive by name' |
||
`require` takes a string name (or array of strings) of the directive(s) to pass in. If an array is used, the injected | ||
argument will be an array in corresponding order. If no such directive can be | ||
found, or if the directive does not have a controller, then an error is raised. The name can be prefixed with: | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ah, I see you took "bracket notation" from here. Still even that is not consistently named, really. |
||
* `?` - Don't raise an error. This makes the require dependency optional. | ||
* `^` - Look for the controller on parent elements as well. | ||
* `?` - Required dependency is optional. The parameter might be `null/undefined`. | ||
* `^` - Look for the directive on parent/ancestor elements as well. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Maybe the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I would actually add a note above or below the bulleted items and not as an explicit item in the list. However re-reading my description, I think "Required dependency is optional" couldn't be any more confusing lol. |
||
|
||
|
||
* `restrict` - String of subset of `EACM` which restricts the directive to a specific directive | ||
declaration style. If omitted directives are allowed on attributes only. | ||
declaration style. If omitted, the default (attributes only) is used. | ||
|
||
* `E` - Element name: `<my-directive></my-directive>` | ||
* `A` - Attribute: `<div my-directive="exp"></div>` | ||
* `A` - Attribute (default): `<div my-directive="exp"></div>` | ||
* `C` - Class: `<div class="my-directive: exp;"></div>` | ||
* `M` - Comment: `<!-- directive: my-directive exp -->` | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice catch!