Dynamically change template of directory

I'am new to Angular.js, and I am trying to use different templates inside a directive for different clients.

The problem is, I have three templates for three kinds of clients, and I want to use different templates for my directive based on the result of client type after detection

The results I found after Googling was all about adding attributes to the directory tag, but by the time I have detection result ready, the template is already compiled.

Any suggestions?

You could use ngSwitch within your directive template.

You could inject a variable into your directive to look in a different directory for the template.

myApp.directive('testDirective', [
  'clientType', function(clientType) {
    return {
      ...
      templateUrl: '/templates/' + clientType + '/test.html'
    };
  }
]);

Then you can set the constant 'clientType' outside of your app and pass it in as a constant.

myApp.constant('clientType', 'mobile'); // Some type of function to determine this

You may need to manually bootstrap your app in order to use this effectively though. I am doing something similar in production code to control where templates are loaded from.