Description
The include directives allows you to include a template on the page.Usage
as element:<layout:include
file="{string}">
</layout:include>
Directive info
- This directive creates new scope.
Parameters
| Param | Type | Details |
|---|---|---|
| file | string | The location of the file of the template |
Example
Source
<h3 id="example_static-file-path">Static File Path</h3>
<layout:include file="css/user-defined-template.tmp.html" user="{{user}}" file-path="{{filePath}}"></layout:include>
<hr />
<h3 id="example_dynamic-file-path">Dynamic File Path</h3>
<layout:include file="{{filePath}}" user="{{user}}" file-path="{{filePath}}"></layout:include>
<hr />
<h3 id="example_dynamic-2-part-file-path">Dynamic 2 Part File Path</h3>
<layout:include file="{{partFilePath1 + partFilePath2}}" user="foo" file-path="{{filePath}}"></layout:include>
<hr />
<h3 id="example_dynamic-file-path-+-static-file-path">Dynamic File Path + Static File Path</h3>
<layout:include file="{{partFilePath1 + 'tmp.html'}}" user="foo" file-path="{{filePath}}"></layout:include>
<hr />
<h3 id="example_multi-level">Multi-level</h3>
<layout:include file="css/level1.tpl.html" leveltype="Parent" child="css/level2.tpl.html"></layout:include>
angular.module('lightning')
.controller('ExampleController', ['$scope', function($scope) {
$scope.user = 'Developer';
$scope.filePath = 'css/user-defined-template.tmp.html';
$scope.partFilePath1 = 'css/user-defined-template.';
$scope.partFilePath2 = 'tmp.html';
}]);
Result
