AngularJS Tutorial - Create Custom HTML Elements with Directives

The following code shows how to create Custom HTML Elements with Directives.

Example


<!--  w  w  w .j  a v  a2s  .  co  m-->
<!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", []);

app.directive("show", function() {
  return {
    link: function(scope, element, attrs) {
      scope.$watch(attrs.show, function(value){
        element.css('display', value ? '' : 'none');
      });
    }
  };
});    
    </script>
  </head>
  <body ng-app="MyApp">
    <label for="checkbox"><input id="checkbox" type="checkbox" ng-model="visible">Toggle me</label>
    <div show="visible">
      <p>Hello World</p>
    </div>
  </body>
</html>

The code above is rendered as follows: