Angularjs open base64 in new tab

A nice question!

To open a base64 encoded string in a new tab using AngularJS, you can use the following approaches:

Method 1: Using $window service

$scope.openBase64InNewTab = function(base64String) {
  $window.open('data:text/plain;base64,' + base64String, '_blank');
};

In this method, we use the $window service to open a new window with the base64 encoded string as the URL. The data:text/plain;base64, part is used to specify the MIME type and encoding of the data.

Method 2: Using $templateCache and $sce services

$scope.openBase64InNewTab = function(base64String) {
  var template = '<a rel="nofollow" target="_blank" href="data:text/plain;base64,' + base64String + '" target="_blank">Open in new tab</a>';
  $templateCache.put('base64Template', template);
  $sce.trustAsHtml(template);
  $compile(template)($scope);
};

In this method, we create a template string that contains the base64 encoded string as the URL. We then use the $templateCache service to cache the template, and the $sce service to trust the HTML as safe. Finally, we use the $compile service to compile the template and render it in the DOM.

Method 3: Using a directive

angular.module('myApp').directive('base64Link', function() {
  return {
    restrict: 'E',
    template: '<a rel="nofollow" target="_blank" href="{{base64String}}" target="_blank">Open in new tab</a>',
    scope: {
      base64String: '@'
    }
  };
});

In this method, we create a custom directive base64Link that takes a base64String attribute. We then use the href attribute to set the URL of the link to the base64 encoded string. When the link is clicked, the browser will open a new tab with the encoded string.

You can then use the directive in your HTML like this:

<base64-link base64-string="yourBase64String"></base64-link>

Choose the method that best fits your use case!