首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >这是AngularJS服务的适当使用吗?

这是AngularJS服务的适当使用吗?
EN

Stack Overflow用户
提问于 2014-09-04 20:44:39
回答 1查看 60关注 0票数 0

我有一个有很多视图的应用程序,这些视图的数量足以证明动态加载CSS文件是合理的,基于这些视图在当时是活动的。

我研究了各种动态“加载”带有角的CSS文件的方法,甚至找到了一个插件,尽管它的实现有点笨重。

我对一种原生的JS方式做了一些研究,并决定以一种更“角度”的方式来实现它。我把下面的服务注入线路控制器。

我的实现方法(使用服务)正确吗?若否,这类逻辑的正确地点是甚麽?

HTML:

代码语言:javascript
运行
复制
<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服务:

代码语言:javascript
运行
复制
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;
    };

}]);

谢谢!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-09-05 10:06:03

请找一个我为你创建的柱塞。它基于一个指令,该指令监视与其自身id相对应的范围变量。

代码语言:javascript
运行
复制
app.directive('disablecss', function() {
  return {
    link: function(scope, element, attrs) {
      scope.$watch('cssToSet.'+attrs.id, function(value,oldvalue) {

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

代码语言:javascript
运行
复制
   <link href="resultCSS.css" id="resultCSS" rel="stylesheet" disablecss />
    <link href="libraryCSS.css" id="libraryCSS" rel="stylesheet" disablecss />

作用域属性由与部分视图关联的控制器自动修改。

代码语言:javascript
运行
复制
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

如果有些东西不是clear.Bye,不要犹豫

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25674689

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档