Edit in JSFiddle

//https://docs.angularjs.org/guide/directive#directive-types
var app = angular.module("superhero", [])

app.directive("myDir", function() {
    return {
        restrict: "EAC",
        template: "<span>Hello World</span></br>"
    }

})

<div ng-app="superhero">
    1.<my-dir></my-dir>
    2.<span my-dir="exp"></span>
    3.<!-- directive: my-dir exp -->
    4.<span class="my-dir: exp;"></span>
</div>