@@ -63,7 +63,7 @@ api/ng.$rootScope.Scope#$digest digest} cycle. An example of interpolation is sh
63
63
here:
64
64
65
65
<pre>
66
- <a href="img/{{username}}.jpg">Hello {{username}}!</a>
66
+ <a ng- href="img/{{username}}.jpg">Hello {{username}}!</a>
67
67
</pre>
68
68
69
69
@@ -263,29 +263,38 @@ Here's an example directive declared with a Directive Definition Object:
263
263
myModule.directive('directiveName', function factory(injectables) {
264
264
var directiveDefinitionObject = {
265
265
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) { ... },
268
269
replace: false,
269
270
transclude: false,
270
271
restrict: 'A',
271
272
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' ],
274
275
compile: function compile(tElement, tAttrs, transclude) {
275
276
return {
276
277
pre: function preLink(scope, iElement, iAttrs, controller) { ... },
277
278
post: function postLink(scope, iElement, iAttrs, controller) { ... }
278
279
}
280
+ // or
281
+ // return function postLink( ... ) { ... }
279
282
},
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( ... ) { ... }
281
290
};
282
291
return directiveDefinitionObject;
283
292
});
284
293
</pre>
285
294
286
295
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.
289
298
290
299
Therefore the above can be simplified as:
291
300
@@ -294,24 +303,11 @@ Therefore the above can be simplified as:
294
303
295
304
myModule.directive('directiveName', function factory(injectables) {
296
305
var directiveDefinitionObject = {
297
- compile: function compile(tElement, tAttrs) {
298
- return function postLink(scope, iElement, iAttrs) { ... }
299
- }
306
+ link: function postLink(scope, iElement, iAttrs) { ... }
300
307
};
301
308
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) { ... }
315
311
});
316
312
</pre>
317
313
@@ -385,35 +381,32 @@ compiler}. The attributes are:
385
381
by calling the `localFn` as `localFn({amount: 22})`.
386
382
387
383
* `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
389
385
`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:
391
387
392
388
* `$scope` - Current scope associated with the element
393
389
* `$element` - Current element
394
390
* `$attrs` - Current attributes object for the element
395
391
* `$transclude` - A transclude linking function pre-bound to the correct transclusion scope:
396
392
`function(cloneLinkingFn)`.
397
393
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:
407
398
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.
410
403
411
404
412
405
* `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 .
414
407
415
408
* `E` - Element name: `<my-directive></my-directive>`
416
- * `A` - Attribute: `<div my-directive="exp"></div>`
409
+ * `A` - Attribute (default) : `<div my-directive="exp"></div>`
417
410
* `C` - Class: `<div class="my-directive: exp;"></div>`
418
411
* `M` - Comment: `<!-- directive: my-directive exp -->`
419
412
0 commit comments