Açılı uygulamada farklı bir bootstrap sürümü nasıl çalıştırılır?

Question

Önceden yüklenmiş bir önyükleme sürümüne sahip olduğumu varsayalım ve bir div (veya başka bir etiket içinde) kullanmak istediğim bir grup css (bootstrap'in başka bir sürümü de dahil) yükleyen bir açısal yönergeye sahip olduğumu varsayalım (çoğunlukla yönergeyi kullandığımlar).

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

ve bu css ve js sadece bu div için çalıştığını şekilde, şöyle uygulanır:

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

Nasıl angularjs bu işleyebilir? JavaScript kütüphanesini kullanarak kavramının

Answer 1

Kanıtı, 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>

ait