Question

我有2个css文件，我想有条件地使用其中任何一个。如何动态加载css文件。我尝试了以下解决方案。

在控制器中我有一个变量

$scope.style1 = "resources/css/style_responsive.css";

index.html中的

<link id="base-style-responsive" ng-href={{style1}} rel="stylesheet">

但我似乎没有正确加载文件。有没有办法动态加载文件。我将非常感激。请帮助我。

Answer 1

尝试将此更改$scope.style1改为$rootScope.style1。

Answer 2

这真的很难看，但是因为对于这类事情来说，这很难做到这一点......这可能是实现解决方案的最佳方式，而不是在你面前。

这是：

http://jsfiddle.net/Wa4Ea/

myApp.service('styleSheet', 
    function($compile, $rootScope) {
        var variableName = 'customStyleSheet';

        var element = angular.element("<link data-ng-href='{{" + variableName + "}}' rel='stylesheet' />");
        $compile(element)($rootScope);

        document.getElementsByTagName("head")[0].appendChild(element[0]);

        return {
            set: function (href) {
                $rootScope[variableName] = href;
            }
        };
    }
);

我不确定你在做什么，确切地说，但你明白了。修改它以满足您的需求。

（无论如何，被盗：

Angular JS: Load CSS and JS files dynamically

你可以尝试更努力地搜索：P）

以angularjs动态加载头部内容

2 个答案: