Question

我有一个应用程序，其中包含许多视图，这些视图多种多样，足以证明动态加载CSS文件，这取决于当时哪个视图处于活动状态。

我研究了使用angular动态“加载”CSS文件的各种方法，甚至找到了一个有效的插件，虽然它的实现很笨拙。

我做了一些本地JS方法的研究，并决定以更“棱角分明的方式”实现它。我将下面的服务注入到路由的控制器中。

我的实施方法（使用服务）是否正确？如果没有，这种逻辑的正确位置是什么？

HTML：

<head>
...
    <link id="library-css" href="~/Styles/libraryCSS" rel="stylesheet" type="text/css" disabled />
    <link id="results-css" href="~/Styles/resultsCSS" rel="stylesheet" type="text/css" disabled />
...
</head>

AngularJS服务：

myServices.service("CSSLoader", [function () {

    var cssLinks = {},
        linkToActivate = {};

    (function init() {
        //loading the <link> elements into the cssLinks object for later retrieval
        cssLinks = {
            library: document.getElementById("library-css"),
            results: document.getElementById("results-css")
        };
    })();

    this.loadCSS = function (cssReference, retainPreviouslyLoadedCSS) {
        if (!cssReference) { throw "CSS Link must be provided.";}

        if (!retainPreviouslyLoadedCSS) {
            //first disables any links that are active
            for (var cnt in cssLinks) {
                cssLinks[cnt].disabled = true;
            }
        }

        linkToActivate = cssLinks[cssReference];
        if (!linkToActivate) { throw "CSS Link, (" + cssReference + "), that was provided cannot be found."; }

        linkToActivate.disabled = false;
    };

}]);

谢谢！

Answer 1

请找到我为您创建的plunker。它基于一个指令，该指令监视与其自己的id相对应的范围变量。

app.directive('disablecss', function() {
  return {
    link: function(scope, element, attrs) {
      scope.$watch('cssToSet.'+attrs.id, function(value,oldvalue) {

其中attrs.id对应于指令设置的链接ID

   <link href="resultCSS.css" id="resultCSS" rel="stylesheet" disablecss />
    <link href="libraryCSS.css" id="libraryCSS" rel="stylesheet" disablecss />

范围属性由与部分视图关联的控制器自动修改

app.config(function($routeProvider) {
  $routeProvider.
    when('/view1', {
        controller:'View1Ctrl', 
        templateUrl:'partial1.html'
    }).
    when('/view2', {
        controller:'View2Ctrl', 
        templateUrl:'partial2.html'
    }).
    otherwise({redirectTo:'/'});
});


app.controller('View1Ctrl',['$scope',function($scope,$rootscope){
  $scope.cssToSet.resultCSS=true;
  $scope.cssToSet.libraryCSS=false;
}]);

idem for View2Ctrl

如果事情不清楚，请不要犹豫.Bye

这是否适合使用AngularJS服务？

1 个答案: