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

docs(directive): Adding documentation and example of using a templateUrl function to the directive developer guide. #9580

Closed
wants to merge 3 commits into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions docs/content/guide/directive.ngdoc
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,46 @@ using `templateUrl` instead:
</file>
</example>

`templateUrl` can also be expressed as a function which should return the location of the html template
you would like to load in dynamically for the directive. The function is passed the element the directive
was called on as well as any attributes attached to that element.

<div class="alert alert-warning">
**Note:** You do not currently have the ability to access scope variables from the `templateUrl` function,
as the template is requested before the scope has initialized.
</div>

<example module="docsTemplateUrlDirective">
<file name="script.js">
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
templateUrl: function(elem, attr){
return 'customer-'+attr.type+'.html';
}
};
});
</file>
<file name="index.html">
<div ng-controller="Controller">
<div my-customer type="name"></div>
<div my-customer type="address"></div>
</div>
</file>
<file name="customer-name.html">
Name: {{customer.name}}
</file>
<file name="customer-address.html">
Address: {{customer.address}}
</file>
</example>

<div class="alert alert-warning">
**Note:** When you create a directive, it is restricted to attribute and elements only by default. In order to
create directives that are triggered by class name, you need to use the `restrict` option.
Expand Down