如何在角度应用程序中运行不同版本的引导程序？

Question

让我们假设我有一个以前加载的bootstrap版本,并且我有一个角度指令加载一些css(包括另一个版本的bootstrap),我只想在div中使用,或者在我的选择中使用其他标签(主要是我使用指令的那些).

.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>