JSFiddle - React, Tailwind, and code Playground

by isnigirev

HTML

<script src="http://code.angularjs.org/1.2.4/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.4/angular-sanitize.min.js"></script>
<div ng-app="app">
	<test-d class="my-class">this should be replaced</test-d>
</div>

CSS

.my-class {
		border: 1px solid orangered;
	}
	.my-class div {
		background-color: #008080;
		margin: 5px;
	}
	.how-to-remove-this-div {
		border: 1px dotted yellow;
	}

JavaScript

angular.module('app', []).directive('testD', ['$compile','$sce', function($compile, $sce) {
			return {
				restrict: 'E',
				link: function(scope, element, attrs, controller) {

					//"case 1"
					//var testElement = angular.element('<div class="{{testClass}}"><div ng-repeat="item in items">{{item.n}}.{{item.label}}</div></div>');

					//"case 2"
					var testElement = angular.element('<div class="{{testClass}}"><div ng-repeat="item in items">{{item.n}}<div class="how-to-remove-this-div" ng-bind-html="item.label|htmlize"></div></div></div>');
                    
                    //"case 2.1"
					var testElement = angular.element('<div class="{{testClass}}"><div ng-repeat="item in items">{{item.n}}<div class="how-to-remove-this-div" ng-bind-html="item.label"></div></div></div>');

					scope.testClass = attrs.class;
                    
                    var someVar = '<i>Some Var</i>';

					scope.items = [
                        {n:10,label:someVar},
					    //{n:10,label:$sce.trustAsHtml('<i class="with-icon">label 11</i>')},
						// "case 1" of "testElement": no any effects with "case 1" that would be preferred
						// "case 2" of "testElement": Error: [$sce:itype] Attempted to trust a non-string value in a content requiring a string: Context: html

						{n:20,label:'<i class="with-icon">label 22</i>'},
						{n:30,label:'<i class="with-icon">label 33</i>'}
					];
                    
                    for(var i=0; i<scope.items.length; i++) {
                        scope.items[i].label = $sce.trustAsHtml(scope.items[i].label);
                        // scope.items[i].label = $sce.trustAsHtml(scope.items[i].label.toString());
                    }

					var testElementCompiled = $compile(testElement)(scope);

					//"case 3"
					element.replaceWith(testElementCompiled);

					//"case 4"
					//element.replaceWith($sce.trustAsHtml(testElementCompiled));
				}
			}
	}]).filter('htmlize', ['$sce', function($sce){
			return function(val)...