角型アプリケーションで異なるバージョンのブートストラップを実行するにはどうすればよいですか？

Question

私は以前にロードされたブートストラップのバージョンを持っているとしましょう。そして、私はdivの中だけで使用したいCSSの束（別のバージョンのブートストラップを含む）をロードする角度指示を持っています。主に私が指示を使用するもの）。

.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) { }); 
       }); 
      } 
     } 
    }]) 

、それらのCSSやJSにのみそのdivのために働くような方法で、このようにそれを適用します。

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

私はangularJSでこれを扱うことができる方法は？

Answer 1

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>