JSFiddle - React, Tailwind, and code Playground

by magicaj

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular-sanitize.js"></script>
<div id="test">
  <h4>
    Example 1: Use ng-non-bindable on transcluded element to pass UGC params
  </h4>
  <li:media-document-lightbox-trigger li-attachment-link="https://khoros.com">
    <span li-attachment-name="{{a='constructor';b={};a.sub.call.call(b[a].getOwnPropertyDescriptor(b[a].getPrototypeOf(a.sub),a).value,0,'console.log(document.domain)')()}}.png" ng-non-bindable></span>
  </li:media-document-lightbox-trigger>
  <h4>
    Example 2: Same as example 1 but as an attribute directive
  </h4>
  <a href="https://khoros.com" li-media-document-lightbox-trigger-as-attr>{{liAttachmentName}}
    <span li-attachment-name="{{a='constructor';b={};a.sub.call.call(b[a].getOwnPropertyDescriptor(b[a].getPrototypeOf(a.sub),a).value,0,'console.log(document.domain)')()}}.png" ng-non-bindable></span>
  </a>
</div>

JavaScript

var angularModule = angular.module('components', ['ngSanitize']);

angularModule.directive('liMediaDocumentLightboxTrigger', function () {
  return {
  	restrict: 'E',
    scope: {      
      liAttachmentLink: '@'
    },
    template: '<a ng-href={{liAttachmentLink}}>{{liAttachmentName}}</a>',
    transclude: true,
    link: function($scope, $element, $attrs, controller, transcludeFn) {
			transcludeFn(function($element) {      	
        for (var i = 0; i < $element.length; i++) {
        	var currentElement = $element[i];
          if (currentElement.nodeType === 1 && currentElement.hasAttribute('li-attachment-name')) {            
            $scope.liAttachmentName = currentElement.getAttribute('li-attachment-name');
            break;
          }
        }
      })
    }
  }
});

angularModule.directive('liMediaDocumentLightboxTriggerAsAttr', function () {
  return {
    restrict: 'A',
    scope: {},
    transclude: true,
    link: function($scope, $element, $attrs, controller, transcludeFn) {
			transcludeFn(function($transElement) {      	
        for (var i = 0; i < $transElement.length; i++) {
        	var currentElement = $transElement[i];
          if (currentElement.nodeType === 1 && currentElement.hasAttribute('li-attachment-name')) {
            $element.text(currentElement.getAttribute('li-attachment-name'));
            break;
          }
          
        }
      });
    }
  }
});

// Run Angular
angular.module('app', ['components']);
angular.bootstrap(document.getElementById('test'), ['app']);