css - 如何在 Angular 应用程序中运行不同版本的 Bootstrap ？

Question

假设我有一个先前加载的 Bootstrap 版本，并且我有一个 Angular Directive(指令)加载了一些我只想在 div 或我选择的其他标签中使用的 css(包括另一个版本的 Bootstrap ) (主要是我使用指令的那些)。

.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

概念验证，使用 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>