Introduction
In my previous articles I told you about:
This article explains the ng-Transclude Directive of AngularJS.
Basically Transclusion means inclusion of a document or a part of a document in another document by passing a reference. AngularJS provides a Directive named "ngTransclude" to insert a document in the DOM Elements.
Now I will create a sample application that will help you understand this directive.
Step 1
First of all you need to add an external Angular.js file to your application, "angular.min.js".
For this you can go to the AngularJS official site or download my source code then fetch it or you can click on this link and download it: ANGULARJS.
After downloading the external file now you need to add this file to the Head section of your application.
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
Step 2
Now after adding the External JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
Now I will create a simple application where this directive along with it's supportive directives will be used.
First I will create a JavaScript function in which some initial values will be provided, also a directive will be created in which some data in a Div will be passed.
<script>
function x($scope) {
$scope.title = 'I am Coming from the Directive';
$scope.domDiv = 'I am provided Directly into the DOM';
}
angular.module('transclude', [])
.directive('p', function () {
return {
restrict: 'AE',
transclude: true,
scope: { title: '@' },
template: '<div style="border: 2px solid red;">' +
'<div style="color: blue">{{title}}</div>' +
'<div ng-transclude></div>' +
'</div>'
};
});
</script>
Here title and domDiv are the initial values that are passed using the scope, then the second to create the function is used, in this method the first module is created, in this module a directive is created.
In this directive "restrict" is used, by default the directive is restricted to the attribute, if we want the directive to be triggered by an element name then we need to use the restriction option. There are three types of restriction option:
- A- It will only match the attribute Name.
- E- It will only match the Element Name.
- AE- It will match the Element and Attribute both.
Then I set transclude to true, at the end in the template some div are passed to which some style is bound along with the initial values that were passed a little while ago.
Step 3
Our work on View is completed and now I will work on the View Model of this application.
<form id="form1" runat="server">
<div ng-app="transclude">
<div ng-controller="x">
<input ng-model="title" style="width:200px"><br>
<input ng-model="domDiv" style="width:200px"><br/>
<p title="{{title}}">{{domDiv}}</p>
</div>
</div>
</form>
Here the first div that is the main div is bound to the ng-app, in this ng-app the module name will be provided that was created in the JavaScript function, then the second div is bound to the controller, the controller is the function name.
Then two Textboxes are created and both are bound to the initial values that were provided in Step 2. One <p> tag is also used in which the first initial value is provided in the Title and the second initial value is bound as Text to be shown.
But this <p> tag will show both the initial values in the Div format along with border and color that was provided in the directive.
Now our application is created and is ready for execution.
Output
On running the application both the initial values will be available in the Textboxes, and both of these initial values will be shown in a red bordered Div.
![ng-transclude directive]()
This shows that Transculate helps to include two different documents in one document.
Now if I make changes in any of the TextBoxes then you will see that corresponding changes are shown in the Div also.
![ng-transclude directive]()
The complete code of this application is as follows:
<html ng-app="transclude" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script>
function x($scope) {
$scope.title = 'I am Coming from the Directive';
$scope.domDiv = 'I am provided Directly into the DOM';
}
angular.module('transclude', [])
.directive('p', function () {
return {
restrict: 'AE',
transclude: true,
scope: { title: '@' },
template: '<div style="border: 2px solid red;">' +
'<div style="color: blue">{{title}}</div>' +
'<div ng-transclude></div>' +
'</div>'
};
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="transclude">
<div ng-controller="x">
<input ng-model="title" style="width:200px"><br>
<input ng-model="domDiv" style="width:200px"><br/>
<p title="{{title}}">{{domDiv}}</p>
</div>
</div>
</form>
</body>
</html>