Question

我有一些模板主题。并且基于这些主题，当我选择任何主题时，我想要更改头部中的CSS文件，该文件也与主题同名。我想以棱角分明的方式做。

这是designList和更新设计功能.-＆gt;

$scope.designList = ['136', '140', '150', '139', '137', '086', '088', '104', '008', '106', '002'];
$scope.updateDesign = function (design) {
            $scope.websiteContent.globalPage.settings.template = design;
            angular.element("link#designID").attr("href", $scope.templateBasePath + "design/" + design + "/css/" + design + ".css");
};

这是我的设计html-＆gt;

<div>
    <h2 class="helvetica designSelect">Select Design</h2>
    <div id="selectThumbs" class="paging">
        <a href="#" class="design{{design}}" ng-repeat="design in designList">
            <img class="designthumb" ng-src="{{trustSrc(templateBasePath + 'design/thumbs/' + design + '.jpg')}}" ng-click="updateDesign(design)">
        </a>
    </div>
</div>

在index.html-＆gt;

中

<link href="app/webapp/templates/design/136/css/136.css" rel="stylesheet" id="designID">

现在它是使用jquery构建但不起作用。但我不想保留这个。我想使用如果有任何方式使用角度。请帮忙

Answer 1

您可以使用https://github.com/GabrielDelepine/angular-css-injector。

angular.module('myApp', ['angular.css.injector'])
.controller('myCtrl', ['cssInjector', '$scope', function(cssInjector, $scope) {
  cssInjector.add("style.css");

  $scope.changeCss = function () {
    cssInjector.removeAll();
    cssInjector.add("style1.css");
  }
}])

plnkr：http://plnkr.co/edit/2nNzQD7zKGCBSAltrrV4?p=preview

使用angularjs动态更改头部的CSS

1 个答案: