我有一个要求 . 你有没有人建议实现它的可能方法 .

我想根据每个路由中传递的URL更改我的应用程序的主题 . 我正在使用以下技术 . - 前端：Angular JS - 后端：Node.js

例如：localhost / x / about localhost / y / about

我通过在登录时使用localtion.search传递参数来通过cookie实现这些 . 但是我需要所有路线中的主题参数 . 基于这个主题需要改变 . 任何人都可以提出可行的方法 .

app.js

app = angular.module('themeApp', ['ngRoute'])  
app.config(function($routeProvider){
$routeProvider
 .when('/',{
    templateUrl: 'home.html'
 })
 .when('/:id/about',{
    templateUrl: 'about.html'
 })
.otherwise({
    redirectTo: '/'
});
});
app.controller('themeController', function ($scope, $routeParams) {  
 console.log($routeParams.id);
 // set the default theme   
 $scope.css = $routeParams.id;
});

menu.html（它不完整，在这里混淆 . 请更正，如何致电）

<li>
   <a href="about">About</a>

 </li>
 <li>
     <a href="home">Home</a>

 </li>

index.html

<html ng-app="themeApp" ng-controller="themeController">  
 <head>  
  <!-- pull in css based on angular -->  
 <link rel="stylesheet" ng-href="css/{{css}}.css">   
 </head>  
 <body>  
 <div ng-view></div>
    <!-- bring in JS and angular -->  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.14/angular.js">        </script>
    <script rc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.14/angular-route.js"></script>

    <script src="app.js"> </script> 
  </body>  
  </html>

css /

it contains the three files,
- red.css

body{  
  background-color: red;
  color: #333;
  font-family: "Source Sans Pro",Calibri,Candara,Arial,sans-serif;  
  font-size: 15px; 
}

green.css body {
背景颜色：绿色;颜色：＃333; font-family："Source Sans Pro"，Calibri，Candara，Arial，sans-serif;
font-size：15px; }
blue.css body {
背景颜色：蓝色;颜色：＃333; font-family："Source Sans Pro"，Calibri，Candara，Arial，sans-serif;
font-size：15px; }

1 回答

快速简单的答案是使用$ rootScope . $ rootScope可供所有控制器使用，但是应该谨慎使用所有全局变量 .

这是一篇很好的帖子，解释了$ rootScope . http://www.dotnet-tricks.com/Tutorial/angularjs/UVDE100914-Understanding-AngularJS- $ rootScope-and- $ scope.html

基本上，如果你在你的两个控制器上使用它来寻找页面x和y

app.controller('login',['$scope','$rootScope', function ($scope,$rootScope) {
    $rootScope.foo='bar';
}]);

app.controller('xCtrl',['$scope','$rootScope', function ($scope,$rootScope) {
    $scope.lorem=$rootScope.foo;
    console.log($scope.lorem); //bar
}]);

app.controller('yCtrl',['$scope','$rootScope', function ($scope,$rootScope) {
    $scope.ipsum=$rootScope.foo;
    console.log($scope.ipsum); //bar
}]);

然后可以像往常一样在HTML标记中使用它们 .

使用$ rootScope要简单得多，但是如果你想每次都使用路由器来下载id，那么它也是可能的 .

app.config(function($routeProvider){
    $routeProvider
     .when('/',{
        controller: 'indexController',
        templateUrl: 'view/index.html'
     })
     .when('/:id/about',{
        controller: 'xCtrl',
        templateUrl: 'view/x.html'
     })
    .otherwise({
        redirectTo: '/'
    });
});

app.controller('xCtrl',['$scope','$routeParams', function($scope,$routeParams){
    $scope.foo=$routeParams.id;
}]);

如果你有更多的页面而不仅仅是/我可以想象这对路由有点棘手 .

您甚至可以将其与根范围耦合，然后将其传递给其他控制器 .

app.controller('xCtrl',['$scope','$rootScope','$routeParams', function($scope,$rootScope,$routeParams){
    $rootScope.foo=$routeParams.id;
    $scope.lorem=$rootScope.foo;
}]);

--EDIT基于评论 - 我可能需要一些代码来确定你所追求的是什么，但也许这澄清了？

网址：mysite.com/blue/about

app.config(function($routeProvider){
    $routeProvider
     .when('/',{
        controller: 'indexController',
        templateUrl: 'view/index.html'
     })
     .when('/:id/about',{
        controller: 'xCtrl',
        templateUrl: 'view/x.html'
     })
    .otherwise({
        redirectTo: '/'
    });
});

app.controller('xCtrl',['$scope','$routeParams', function($scope,$routeParams){
    $scope.theme=$routeParams.id;
}]);

HTML

<div ng-controller="xCtrl">
    <div ng-class="{{theme}}">
        My theme is {{theme}}.
    </div>
</div>

CSS

.blue
{
    background-color: blue;
}
.green
{
    background-color: green;
}

回复于 2024-05-08T16:18:33+08:00

使用url Param的动态主题

app.js

menu.html（它不完整，在这里混淆 . 请更正，如何致电）

index.html

css /

1 回答

相关问题