How to Dynamically Change Template URL in Angular JS Directives

We talk about AngularJs Directive very often,cuz it's great component.That's why today we gonna talk about AngularJs Driective TemplateUrl.

Since AngularJS is now a deprecated framework, you can use JavaScript modern frameworks like Vuejs, React and Angular, instead.

We all know, that there is template and templateUrl.Maybe we have used it very often,but there is one syntax,that we don't use often.That syntax is: the templateUrl can be not only a value.It can be a function with any arguments which returns a value as url.Lets see what it's look like.

...
module.directive("myDirective",function(){
    return {     
      ...
      templateUrl: function(elem,attrs){
          // DO whatever you want
          return anyUrl;
      },
      link: function(scope, el, attrs){
      }
    }
})