How to run another bootstrap version in angular app?

Question

Suppose I have a previous bootstrape version downloaded, and I have an angular directive that loads some css bundle (including another version of bootstrap) that I want to use only in a div or in another tag of my choice (mostly those 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 so that these css and js only work for this div:

 <div class="row" directivename></div> 

How can I handle this in angularJS?

Answer 1

Proof of concept using thomaspark / scoper JavaScript library

 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>