I have used transclude in two different ways. In the first one I have used ng-transclude directive in a div and added it with existing template value. In the second option I have injected transclude, invoking it as a function which clones the html content value. With loop you can view the content multiple times. Only if you remove transclude:false then you can hide the content.
<!DOCTYPE html>
<html>
<head>
<title>Hell with this world</title>
<meta charset="utf-8">
<style type="text/css">
h1.first
{
color:#FF0000;
}
h1.second
{
color:#0000FF;
}
</style>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope){
});
myApp.directive("panel1",function(){
return {
restrict: "E",
transclude: true,
template: '<h1 class="second">This panel1 div meant to see if ng-transclude included... </h1><div ng-transclude></div>'
}
});
myApp.directive("panel2",function(){
return {
restrict: "E",
transclude: true,
template: '<h1 class="second">This panel2 div meant to see if ng-transclude included...</h1>',
link: function(scope, element, attrs, ctrl, transclude){
transclude(function(clone){
element.append(clone);
});
}
}
});
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<panel1>
<h1 class="first"> This is in my first HTML section, cannot see if transclude is set to
false!!!!
</h1>
</panel1>
<panel2>
<h1 class="first"> This is in my second HTML section, cannot see if transclude is set to
false!!!!
</h1>
</panel2>
</div>
</div>
</body>
</html>
Youtube Tutorial
#AngularJS #mvc #javascript #googleapi #ngtransclude
No comments:
Post a Comment