具有不同CSS和JS文件的登录页面

Question

我是angularjs的新手，刚刚开始使用ui.router来管理不同视图的项目，我面临的问题是例如我拥有一个母版页index.html。

<html lang="en" ng-app="leadsangularApp">
<head>
    <link href="style1.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div ui-view=""></div>
</body>
</html>

我所有的视图都加载到<div ui-view=""></div>但是如果我的登录页面具有完全不同的CSS样式（头）和js文件（页脚），该怎么办，我需要将其加载到不同的模板中，例

<html lang="en" ng-app="leadsangularApp">
<head>
    <link href="style2.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div ui-view=""></div>
</body>
</html>

如果我尝试使用嵌套的ui视图

 app.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/home');
          // States
          $stateProvider
            .state('root', {
                abstract: true,
                templateUrl: 'views/default.html',
            })
            .state('home', {
                parent: "root",
                url: "/home",
                templateUrl: 'views/main.html',
            })
            .state('login', { 
                url: "/login",
                templateUrl: 'views/login.html',
            });
  });

我的/ login页面具有不同的视图，但仍然加载相同的css和js文件，我希望我的/ login页面具有完全不同的head和footer部分，如何实现？

Answer 1

一般来说，这不是推荐的方法，但是有一个github项目针对CSS执行此操作： https : //github.com/manuelmazzuola/angular-ui-router-styles 。 ui-router不直接支持它。

Answer 2

您可以使用ng-href 。 根据您的需要，您将必须监听$stateChangeSuccess并更改绑定到ng-href 。

对于您的HTML，请执行以下操作：

<link rel="stylesheet" ng-href="{{stylesheet}}" />

变量stylesheet可以动态绑定到您的范围，并且可以根据需要更改值。

然后，您可以听$stateChangeStart或$stateChangeSuccess并相应地更改$scope.stylesheet值。

app.controller('mainCtrl', function($scope, $state) {
  $scope.stylesheet = "style.css";

  $scope.$on('$stateChangeStart',
    function(event, toState, toParams, fromState, fromParams) {

      if (toState.name === "login") {
        $scope.stylesheet = "style2.css"
      } else {
        $scope.stylesheet = "style.css"
      }
    })
})

这是plnkr： http ://plnkr.co/edit/qR7FLDAyRTkFndMQyWod?p=preview

要了解有关ui-router API的更多信息，请访问： http : //angular-ui.github.io/ui-router/site/#/api/ui.router.state

具有不同CSS和JS文件的登录页面

问题描述

2 个解决方案

解决方案1
0 2016-06-01 18:23:18

解决方案2
0 2016-06-01 18:51:17

具有不同CSS和JS文件的登录页面

问题描述

2 个解决方案

解决方案1 0 2016-06-01 18:23:18

解决方案2 0 2016-06-01 18:51:17

解决方案1
0 2016-06-01 18:23:18

解决方案2
0 2016-06-01 18:51:17