Shapeshift Simple in AngularJS
HTML
<script src="http://mcpants.github.io/jquery.shapeshift/core/jquery.shapeshift.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div ng-app="myapp">
<div class="container" shapeshift="">
<div>
<script type="text/javascript">
baseUrl = "https://widgets.cryptocompare.com/";
var scripts = document.getElementsByTagName("script");
var embedder = scripts[ scripts.length - 1 ];
(function (){
var appName = encodeURIComponent(window.location.hostname);
if(appName==""){appName="local";}
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
var theUrl = baseUrl+'serve/v1/coin/feed?fsym=BTC&tsym=USD&feedType=CoinTelegraph';
s.src = theUrl + ( theUrl.indexOf("?") >= 0 ? "&" : "?") + "app=" + appName;
embedder.parentNode.appendChild(s);
})();
</script>
</div>
<div>
<script type="text/javascript">
baseUrl = "https://widgets.cryptocompare.com/";
var scripts = document.getElementsByTagName("script");
var embedder = scripts[ scripts.length - 1 ];
(function (){
var appName = encodeURIComponent(window.location.hostname);
if(appName==""){appName="local";}
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
var theUrl = baseUrl+'serve/v1/coin/feed?fsym=BTC&tsym=USD&feedType=CoinTelegraph';
s.src = theUrl + ( theUrl.indexOf("?") >= 0 ? "&" : "?") + "app=" + appName;
embedder.parentNode.appendChild(s);
})();
</script>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
CSS
.container {
border: 1px dashed #ccc;
position: relative;
}
.container > div {
background: #CCC;
position: absolute;
width: 450px;
height: 500px;
}
.container > div[data-ss-colspan='2'] { width: 170px; }
.container .ss-placeholder-child {
background: transparent;
border: 1px dashed red;
}
JavaScript
var app = angular.module('myapp', []);
app.directive('shapeshift', function(){
return {
restrict: 'A',
link: function(scope, element, attrs) {
$(element).shapeshift(scope.$eval(attrs.shapeshift));
}
};
}
);