AngularJS Tutorial - Render a Directive's DOM Node Children

The following code shows how to render a Directive's DOM Node Children.

Example


<!doctype html>
<html ng-app="MyApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
    <script>
var app = angular.module("MyApp", []);
<!--from   w  w w.j  a  va 2 s  . c om-->
app.directive("myWidget", function() {
  var linkFunction = function(scope, element, attributes) {
    scope.text = attributes["myWidget"];
  };

  return {
    restrict: "A",
    template: "<h1>{{text}}</h1>",
    link: linkFunction,
    scope: {}
  };
});
    </script>
    <link rel="stylesheet" href="css/bootstrap.css">
  </head>
  <body>
    <div my-widget="Hello World"></div>

  </body>
</html>

The code above is rendered as follows: