angular.js/directives: A really simple transclude example

In this example below you will see how to do a angular.js/directives: A really simple transclude example with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 0x04, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0x04 ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>angular.js/directives: A really simple transclude example</title>
  
  
  
  
  
</head>

<body>

  <div ng-app="app">
  <div a-simple-transclude-directive>
    Hello, I wanna be part of this directive!
    
  </div>
</div>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/0x04/angularjsdirectives-a-really-simple-transclude-example-tyaps */
angular
  .module('app', [])
  .directive('aSimpleTranscludeDirective', [
    function()
    {
      return {
        restrict: 'A',
        transclude: true,
        template: 'Contents of the directive tag are included here: <span style="background: silver;" ng-transclude></span>'
      };
    }
  ]);

Comments