How to run different version of bootstrap in an angular application? - css

Question

Let's assume i have a previous loaded bootstrap versione , and that i have an angular directive that load some bunch of css (including another version of bootstrap) that i want to use only in a div, or in other tag at my choiche (mostly the ones in which i use the directive).
.directive('directivename' , ['$ocLazyLoad',function($ocLazyLoad){
return {
restrict : 'A',
controller : function($ocLazyLoad,$scope,$q) {
$ocLazyLoad.load('http://somepath/bootstrap/css/bootstrap.css',{cache: false}).then(function(response) {
$ocLazyLoad.load('http://somepath/bootstrap/js/bootstrap.min.js',{cache: false}).then(function(response) { });
});
}
}
}])
and apply it like this, in the way that those css and js only works for that div :
<div class="row" directivename></div>
How can i handle this in angularJS?

Answer 1

Proof of concept, using the JavaScript library thomaspark/scoper
var app = angular.module('MyApp', [], function() {});
app.controller('MyCtrl', function($scope) {});
app.directive('scopedcss', function($http, $compile) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
// Fetch bootstrap css (you should cache it instead of requesting it everytime)
$http({
method: 'GET',
url: 'https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css'
}).then(function successCallback(response) {
// Create a <style scoped> tag with the CSS content
var cssTag = angular.element('<style scoped>' + response.data + '</style>');
// Insert the tag inside the element
element.prepend(cssTag);
// Call the process() method defined by scoper lib
// It will parse the CSS and prefix it with a unique ID
// It will also add the same ID to the element
window.process();
});
}
}
});
h1 {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdn.rawgit.com/thomaspark/scoper/29c01744/scoper.min.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl">
<div scopedcss>
<h1>Hello bootstrap!</h1>
<button type="button" class="btn btn-default">Button</button>
</div>
<h1>Regular title</h1>
<button type="button" class="btn btn-default">Button</button>
</div>