<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller='myController'>
<my-directive template="type"></my-directive>
</body>
</html>
var app = angular.module('myApp', [])
app.directive('myDirective', [function(){
return {
template: '<div ng-include="getTemplate()"></div>',
restrict: 'E',
scope: {template: '='},
link: function(scope, element, attr, ctrl) {
var baseURL = 'templates/myDirective.'
scope.getTemplate = function(){
baseURL = "" //remove this
return baseURL + scope.template + ".html"
};
}
};
}]);
app.controller('myController', function($scope) {
$scope.type = 'test'
});
/* Styles go here */
<p>testing the directive</p>