问题：

使用url参数的动态主题

景同

2023-03-14

我有一个要求。你能建议一下实现这一目标的可能方法吗。

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

例如：localhost/x/关于localhost/y/关于

我通过使用Location传递参数，通过cookies实现了这些。登录时进行搜索。但我在所有路线上都需要那个主题参数。基于这个主题，我们需要改变。有人能提出可能的方法吗。

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;
});

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

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

 </li>

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

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; 
}

绿色。css正文{
背景色：绿色；颜色：#333；字体系列：“Source Sans Pro”、Calibri、Candara、Arial、Sans serif；
字体大小：15px；}
- 蓝色。css正文{
  背景色：蓝色；颜色：#333；字体系列：“Source Sans Pro”、Calibri、Candara、Arial、Sans serif；
  字体大小：15px；}

共有1个答案

邢和光

2023-03-14

快速简单的答案是使用$rootScope$rootScope可用于所有控制器，但与所有全局变量一样，应谨慎使用。

这里有一篇很好的帖子解释$rootScope。http://www.dotnet-tricks.com/Tutorial/angularjs/UVDE100914-Understanding-AngularJS-$rootScope和-$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;
}]);

如果你有更多的页面，而不仅仅是 /about我可以想象这变得有点棘手的路由。

您甚至可以将其与根作用域耦合，然后将其传递给其他控制器。

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

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

网址：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;
}

类似资料：

使用动态数量的参数调用动态函数

问题内容：我正在寻找一个窍门。我知道如何在JavaScript中调用动态的任意函数，并传递特定的参数，如下所示：我知道如何使用内部的集合传递可选的，无限制的参数，但是，我不知道如何发送任意数量的参数以动态发送给它；我该如何完成这样的工作，但是要有任意数量的可选参数（不要使用丑陋的– ）？问题答案：使用函数的apply方法：- 编辑：在我看来，这将是一个稍微的调整会更有用：这将在浏览器之
基于参数的动态$资源URL

我试图击中一个看起来像。< br > < code > API shop . create([CreateCampaignService，{ auth _ token:user . token })] 我怎样才能使APIshop能够像这样的东西：并点击 /
为ajax动态创建URL参数

我正在创建一个动态表单。ie基于下拉框中的用户选择。根据下拉选择，我可以有2到20个字段。因此，每次用户更改下拉列表时，我们都可以有各种类型的不同表单字段。提交url参数。是否可以仅提交可见且与用户选择相关的表单字段当前url字符串正在提交所有值。对于场景1 当用户从下拉列表中选择“A”时。我们显示firstname和lastname输入字段以及url？fname=fname 情景2 当用户从
使用参数缓存URL视图/状态

问题内容：我正在使用Cordova和AngularJS制作一个移动应用程序。目前，我已经安装了ui-router进行路由，但是我愿意接受其他任何路由选择。我的愿望：我想缓存某些绑定了参数的视图。换句话说，我想缓存路径（或页面）。情况示例：假设我们看到某个仪表板页面，单击某些书的封面，该书的封面会重定向到path 。该路径是第一次加载到应用程序中。路由器从重定向到（无论名称如何）。现在，加载给
基于数组2中id数量的动态URL参数

我有一个名为selectedItem的数组，它是从多选择下拉按钮填充的。如果所有选项都被选中，选择项目可能看起来像这样：我需要添加id值，不管选择了多少，作为超文本传输协议GET请求中的参数。现在我的逻辑看起来像这样。我的SearchItem界面如下所示：现在，它创建了一个请求选项对象，其中的值是一个数组，但是我的超文本传输协议请求没有在网络选项卡中的查询字符串参数字段中显示这一点。看来ad
使用带动态参数的Mono方法

我有一个函数将输入作为Mono返回：我想用初始值3调用发射器一次，然后重复调用，直到达到一定的大小。这个重复逻辑应该在main方法中，所以我不能修改发射器（）。一个简单的解决方案是：基本上，我正在尝试根据前一个单声道的结果创建另一个具有动态参数的单声道。我知道Mono/Flux是不变的。。。有没有一种简洁、反应迅速的方法？我试过像Flux这样的东西。范围（0，整数。MAX\u值）。zipWi

使用url参数的动态主题

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档