@@ -282,6 +282,46 @@ using `templateUrl` instead:
282
282
</file>
283
283
</example>
284
284
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
+
285
325
<div class="alert alert-warning">
286
326
**Note:** When you create a directive, it is restricted to attribute and elements only by default. In order to
287
327
create directives that are triggered by class name, you need to use the `restrict` option.
0 commit comments