Hello World with Custom Directives

Notes

  • Demonstrates the custom directive of the type, element (<say-hello name="name"></say-hello>)
  • Pay attention to the directive method which is invoked on module instance, helloDirectives
  • The key is to define the HTML and assign it to "template" variable
  • For the directive to be applied to both element and attribute, "restrict" variable is used. It is assigned to 'EA'. Other two types that the "restrict" variable could be assigned is M (comment) and C (class)
  • Pay attention to isolate scope within the directive and how name is bound to "name" ng-model

View code

			
<div ng-show="name">
     <say-hello name="name"></say-hello>
</div>

Directive code

			
<script>
  var helloDirectives = angular.module( "helloDirectives", [] );
  helloDirectives.controller( "DirectivesCtrl", [ '$scope', function( $scope ){
    $scope.name = "";
  }]);
  helloDirectives.directive( "sayHello", function() {
    return {
      restrict: 'EA',
      scope: {
        name: '='
      },
      template: '<h2>Hello, {{name}}</h2>'
    };
  });
  </script>