tranclude01

by rahulshivsharan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl" class="container">
			<div class="page-header">
				<h3>This is Directive Practise</h3>
			</div>
			<div class="row">
				<div class="col-md-4">					
					<input type='button' class='btn btn-primary' value="Click-Me" ng-click='showMe()' />																		
				</div>			
			</div>
			<div class="row" style="margin-top:2%">
				<div class="col-md-4">
					<div simple-directive>
						<span>His real Name is : <b>{{myCtrlObj.localName}}</b><span>
						<br/>
						<span>His pet name is : <b>{{myCtrlObj.petName}}</b></span>
					</div>
				</div>
			</div>	
		</div>

JavaScript

angular.module("MyApp",[]);
			(function(){
				angular.module("MyApp").controller("MyCtrl",MyCtrl);
				angular.module("MyApp").directive("simpleDirective",simpleDirective);
				
				function MyCtrl($scope){
					$scope.myCtrlObj = new Object();					
					$scope.myCtrlObj.localName = "John Wayne";
					$scope.myCtrlObj.petName = "Johny";
				};
				
				function simpleDirective(){
					var templatStr = "<div class='alert alert-warning'>"+
											"<h3>This is Toggle Example....</h3>" +
											"<h2><strong>{{myCtrlObj.localName}}</strong></h2>"+											
									  "</div>";
					return {
						restrict : "EA",
						template : function(tElem,tAttr){
							return templatStr;
						},	
						replace : true,
						transclude : true ,
						link : function(scope,elem,attr,controller,transcludeFn){							
							
							scope.myCtrlObj.localName = "Leonardo Di Caprio";
							scope.myCtrlObj.petName = "Leo";
							
							scope.showMe = function(){
								if (elem.hasClass("alert-success") === true){
									elem.removeClass("alert-success");
									elem.addClass("alert-warning");
								}else{
									elem.removeClass("alert-warning");
									elem.addClass("alert-success");
								}								
							};
						
							var clonedElement = transcludeFn(function(clone){								
								return clone;
							});

							elem.append(clonedElement);	
						}						
					}
				}
			})();