Css 如何将样式表附加到<；头>；在AngularJS$routeProvider中？_Css_Angularjs_Conditional_Route Provider

Css 如何将样式表附加到<；头>；在AngularJS$routeProvider中？

css angularjs

Css 如何将样式表附加到<；头>；在AngularJS$routeProvider中？,css,angularjs,conditional,route-provider,Css,Angularjs,Conditional,Route Provider,我只想在用户访问我的AngularJS应用程序/站点上的contact.html视图时加载特定的CSS文件。我发现这个答案对我来说几乎是有意义的。charlietfl接受的答案是：可以将新样式表附加到$routeProvider中的头部。对于我使用字符串，但也可以创建新的链接元素，或者为样式表创建一个服务 /* check if already exists first - note ID used on link element*/ /* could also track within

我只想在用户访问我的AngularJS应用程序/站点上的

contact.html

视图时加载特定的CSS文件。我发现这个答案对我来说几乎是有意义的。charlietfl接受的答案是：

可以将新样式表附加到

$routeProvider

中的头部。对于我使用字符串，但也可以创建新的链接元素，或者为样式表创建一个服务

/* check if already exists first - note ID used on link element*/
/* could also track within scope object*/
if( !angular.element('link#myViewName').length){
    angular.element('head').append('<link id="myViewName" href="myViewName.css" rel="stylesheet">');
}

这行得通吗？

更新了：

下面描述的解决方案是一种基于路由应用不同类和页面标题的替代方案，可用于其他情况。

对于每条路线，我都创建了一个名为“bodyClass”和“title”的新键（但您可以调用任何您喜欢的键），它如下所示：

'use strict';
var myApp = angular.module('myApp', 'ngResource'])
.config(function ($routeProvider) {

myApp.siteName = 'My Cool App';

$routeProvider
    .when('/home', {
     title:'Home - ' + myApp.siteName,
     bodyClass: 'home',
     templateUrl: 'views/home.html',
     controler: 'bmsHomeCtrl'
    })
    .when('/contact', {
      title:'Contact - ' + myApp.siteName,
      bodyClass: 'contact',
      templateUrl: 'views/contact.html',
      controler: 'bmsContactCtrl'
    })
    .otherwise({
      redirectTo: '/home'
    });
});

然后，对于每个$routeChangeSuccess事件，我将更改页面的

，以及

的类

您将上面的代码放在同一个主app.js（例如）文件中

在呈现视图的index.html页面上，我有以下代码来获取标题和类：

<title>{{ title }}</title>

<body class="{{ bodyClass }}">

{{title}

因此，如果我访问我的应用程序主页，标题标签将是

<tittle> Home - My Cool App</tittle>

主页-我的酷应用

而身体标签将是

<body class="home">

它就像一个符咒

我知道此解决方案不会加载CSS文件，但您可以将这些样式放入“.contact”类中，该类仅在您点击特定路线时应用

不确定是否解决了您的问题，但我希望这能帮助您，或者至少为您指明正确的方向。

我为此提供了服务

守则的重要部分：

var head = angular.element(document.querySelector('head')); // TO make the code IE < 8 compatible, include jQuery in your page and replace "angular.element(document.querySelector('head'))" by "angular.element('head')"

if(head.scope().injectedStylesheets === undefined)
{
    head.scope().injectedStylesheets = [];
    head.append($compile("<link data-ng-repeat='stylesheet in injectedStylesheets' data-ng-href='{{stylesheet.href}}' rel='stylesheet' />")(scope)); // Found here : http://stackoverflow.com/a/11913182/1662766
}

head.scope().injectedStylesheets.push({href: "/url/to/style.css"});

var head=angular.element（document.querySelector（'head'））；//要使代码IE<8兼容，请在页面中包含jQuery，并将“angular.element（document.querySelector（'head'）”替换为“angular.element（'head'）”
if（head.scope（）.injectedStylesheets==未定义）
{
head.scope（）.injectedStylesheets=[]；
head.append（$compile（“”）（scope））；//可在此处找到：http://stackoverflow.com/a/11913182/1662766
}
head.scope（）.injectedStylesheets.push（{href:“/url/to/style.css”}）；

Github中的完整代码：）

我认为最好/最简单的答案是我留下的答案。其他人也问了同样的问题，所以我想出了一些简单的代码和一个小的github repo来处理这个场景。

对于完整的解决方案，我建议使用

正如您已经知道的，在Angular中，我们可以在页面和组件中包含模板（结构）和控制器（行为）。AngularCSS启用最后一个缺少的部分：附加样式表（表示）

路线示例：

$routeProvider
.when('/page1', {
  templateUrl: 'page1/page1.html',
  controller: 'page1Ctrl',
  /* Now you can bind css to routes */
  css: 'page1/page1.css'
})
.when('/page2', {
  templateUrl: 'page2/page2.html',
  controller: 'page2Ctrl',
  /* You can also enable features like bust cache, persist and preload */
  css: {
    href: 'page2/page2.css',
    bustCache: true
  }
})
.when('/page3', {
  templateUrl: 'page3/page3.html',
  controller: 'page3Ctrl',
  /* This is how you can include multiple stylesheets */
  css: ['page3/page3.css','page3/page3-2.css']
})
.when('/page4', {
  templateUrl: 'page4/page4.html',
  controller: 'page4Ctrl',
  css: [
    {
      href: 'page4/page4.css',
      persist: true
    }, {
      href: 'page4/page4.mobile.css',
      /* Media Query support via window.matchMedia API
       * This will only add the stylesheet if the breakpoint matches */
      media: 'screen and (max-width : 768px)'
    }, {
      href: 'page4/page4.print.css',
      media: 'print'
    }
  ]
});

指令示例：

myApp.directive('myDirective', function () {
  return {
    restrict: 'E',
    templateUrl: 'my-directive/my-directive.html',
    css: 'my-directive/my-directive.css'
  }
});

您可以阅读有关AngularCSS的更多信息：

您必须使用“$compile”让angular知道您必须向dom添加一些内容。这将自动调用$scope.$apply（），inturn将调用$digest。这应该可以做到。我应该把

$compile

放在哪里？当请求该资源时，.contact类中的css将与主css的其余部分一起加载。它不是动态加载的，而是动态应用的。@AGDM这是正确的。我上面所描述的也是正确的！：）也许“加载”这个词有点误导。因此，我很高兴将其改为“应用”。

$routeProvider
.when('/page1', {
  templateUrl: 'page1/page1.html',
  controller: 'page1Ctrl',
  /* Now you can bind css to routes */
  css: 'page1/page1.css'
})
.when('/page2', {
  templateUrl: 'page2/page2.html',
  controller: 'page2Ctrl',
  /* You can also enable features like bust cache, persist and preload */
  css: {
    href: 'page2/page2.css',
    bustCache: true
  }
})
.when('/page3', {
  templateUrl: 'page3/page3.html',
  controller: 'page3Ctrl',
  /* This is how you can include multiple stylesheets */
  css: ['page3/page3.css','page3/page3-2.css']
})
.when('/page4', {
  templateUrl: 'page4/page4.html',
  controller: 'page4Ctrl',
  css: [
    {
      href: 'page4/page4.css',
      persist: true
    }, {
      href: 'page4/page4.mobile.css',
      /* Media Query support via window.matchMedia API
       * This will only add the stylesheet if the breakpoint matches */
      media: 'screen and (max-width : 768px)'
    }, {
      href: 'page4/page4.print.css',
      media: 'print'
    }
  ]
});

myApp.directive('myDirective', function () {
  return {
    restrict: 'E',
    templateUrl: 'my-directive/my-directive.html',
    css: 'my-directive/my-directive.css'
  }
});