使用 url 参数的动态主题
Posted
技术标签:
【中文标题】使用 url 参数的动态主题【英文标题】：Dynamic theme using url Param 【发布时间】：2016-03-27 06:33:25 【问题描述】：我有一个要求。你能提出实现它的可能方法吗？
我想根据每个路由中传递的 URL 更改我的应用程序的主题。我正在使用以下技术。 - 前端：Angular JS - 后端：Node.js
例如：localhost/x/about 本地主机/y/关于
我通过 cookie 在登录时使用 localtion.search 传递参数来实现这些。但是我在所有路线中都需要该主题参数。基于该主题需要更改。任何人都可以提出可能的方法。
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;
【问题讨论】：
【参考方案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就简单多了，但是如果你想用router每次拉下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;
【讨论】：
这是适合通过 rootscope 更改模板的答案。因为我的要求是用户必须查看 url 中的主题信息以及相应的 css 文件更改。 这只有一个有几个类的css。我想为每个主题管理多个 css 文件，并且应用程序中所有导航的 url 应该相同。例如：localhost/x/about、localhost/x/contact 和 localhost/y/about、localhost/y/contact。如果用户键入任何 url，我必须更改 css 文件 x / y 如果需要，请尝试在控制器中使用 if 语句为类设置其他变量。 查询参数如何在所有路由/页面中保持原样 如果您的所有路线都在 id 后面，它将继续工作。 /:id/about 或 /:id/lorem/ipsum 或 /:id/x/y/z 将能够从 $routeParams 获取 id 参数以上是关于使用 url 参数的动态主题的主要内容，如果未能解决你的问题，请参考以下文章
使用 Jquery $getJSON 如何在 Url 参数之后为 [data] 参数动态创建数据？