Skip to main content

​
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

ParamTypeDetails
filestringThe 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

Result