这是否适合使用AngularJS服务？

我有一个应用程序，其中包含许多视图，这些视图各不相同，而且数量足以证明根据当时哪个视图处于活动状态动态加载CSS文件。这是否适合使用AngularJS服务？

我研究了用角度动态“加载”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; 
    }; 

}]);

谢谢！

来源

2014-09-04 tedwards947

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

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

其中attrs.id对应于其中指令被设为

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

scope属性automaticaly由关联到局部视图控制器修改的链路ID

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

不要犹豫，如果有什么不清楚.BB

来源

2014-09-05 10:06:03

我喜欢这个解决方案，它是_even more_ angular！谢谢 – tedwards947 2014-09-05 14:11:10

这是否适合使用AngularJS服务？

回答

相关问题