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

Commit f277c56

Browse files
spaceribsbtford
authored andcommitted
docs(directive): add an example showing templateUrl functions
Related to #2895
1 parent 02be700 commit f277c56

File tree

1 file changed

+40
-0
lines changed

1 file changed

+40
-0
lines changed

docs/content/guide/directive.ngdoc

+40
Original file line numberDiff line numberDiff line change
@@ -282,6 +282,46 @@ using `templateUrl` instead:
282282
</file>
283283
</example>
284284

285+
`templateUrl` can also be a function which returns the URL of an HMTL template to be loaded and
286+
used for the directive. Angular will call the `templateUrl` function with two parameters: the
287+
element that the directive was called on, and an `attr` object associated with that element.
288+
289+
<div class="alert alert-warning">
290+
**Note:** You do not currently have the ability to access scope variables from the `templateUrl`
291+
function, since the template is requested before the scope is initialized.
292+
</div>
293+
294+
<example module="docsTemplateUrlDirective">
295+
<file name="script.js">
296+
angular.module('docsTemplateUrlDirective', [])
297+
.controller('Controller', ['$scope', function($scope) {
298+
$scope.customer = {
299+
name: 'Naomi',
300+
address: '1600 Amphitheatre'
301+
};
302+
}])
303+
.directive('myCustomer', function() {
304+
return {
305+
templateUrl: function(elem, attr){
306+
return 'customer-'+attr.type+'.html';
307+
}
308+
};
309+
});
310+
</file>
311+
<file name="index.html">
312+
<div ng-controller="Controller">
313+
<div my-customer type="name"></div>
314+
<div my-customer type="address"></div>
315+
</div>
316+
</file>
317+
<file name="customer-name.html">
318+
Name: {{customer.name}}
319+
</file>
320+
<file name="customer-address.html">
321+
Address: {{customer.address}}
322+
</file>
323+
</example>
324+
285325
<div class="alert alert-warning">
286326
**Note:** When you create a directive, it is restricted to attribute and elements only by default. In order to
287327
create directives that are triggered by class name, you need to use the `restrict` option.

0 commit comments

Comments
 (0)