Edit in JSFiddle

//宣告ng-app
var demoApp = angular.module("demoapp", []);

//ng-app底下掛載ng-controller
demoApp.controller("demoCtrl", function($scope) {

});

//ng-app底下掛載directive
demoApp.directive("myDirective", function(){
    return {
        template: "<h1>這是Directive！</h1>", //想要呈現的東西
        restrict: 'AECM' //讓directive可以接受AECM四種限制
    }
});

<div ng-app="demoapp">
  <div ng-controller="demoCtrl">
    <h1>AngularJs客制化directive各種restrict方法Demo</h1>
    <div my-directive>111</div>
    <my-directive>222</my-directive>
    <div class="my-directive">333</div>
    <!-- directive:my-directive -->
    444
    <br>
    <h3>只有444被顯示出來，所以寫在directive中的文字不會被顯示（這是有原因的，因為transclude設定）</h3>
    <h4>但詭異的M還是很詭異....</h4>
  </div>
</div>

h3{
  color:red
}
h4{
  color:blue
}