Является ли это подходящим использованием услуги 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 Я создал для вас. Он основан на директиве, которая отслеживает переменную области видимости, соответствующую ее собственному идентификатору.

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 />

Атрибут Прицел автоматически изменен с помощью контроллера, связанного с частичным видом

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

Не стесняйтесь, если что-то не ясно.

источник

2014-09-05 10:06:03

Мне нравится это решение, это _even more_ angular! благодаря – tedwards947

Является ли это подходящим использованием услуги AngularJS?

ответ

Смежные вопросы