Làm thế nào để chạy phiên bản khác nhau của bootstrap trong một ứng dụng góc?

Question

Giả sử tôi có phiên bản bootstrap được tải trước đó và tôi có một chỉ thị góc để tải một số css (bao gồm một phiên bản bootstrap khác) mà tôi chỉ muốn sử dụng trong div hoặc thẻ khác tại choiche của tôi (chủ yếu là những cái mà tôi sử dụng chỉ thị).

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

và áp dụng nó như thế này, trong cách mà những css và js chỉ hoạt động cho div rằng:

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

Làm thế nào tôi có thể xử lý này trong angularJS?

Answer 1

Bằng chứng về khái niệm, bằng cách sử dụng thư viện JavaScript 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>