我想在我的应用程序设置自定义主题,所以我正在做的是让用户选择某些主题,它将全面更改应用程序主题。我有一个服务,发送一块JSON,并监听它在每个视图的控制器内部变化。现在,它在视图本身内可以正常工作 - 供参考,这里是工作代码的一些片段。角度,访问范围以外的ng视图环绕div
我厂控制的主题 -
angular.module('demoApp')
.factory('templatingFactory', function() {
var meaningOfLife =
{
'h1': '#ea6060',
'bg': '#ffffff'
};
return {
setTheme: function(theme) {
meaningOfLife = theme;
},
getTheme: function() {
return meaningOfLife;
}
};
});
我的一个例子控制器显示和更改主题(听更改)
$scope.themeStore = templatingFactory.getTheme();
console.log($scope.themeStore);
//send new themes
$scope.themeOne = function() {
var newT1 = { 'h1': '#8A6516',
'bg': '#000000'};
templatingFactory.setTheme(newT1);
};
$scope.themeTwo = function() {
var newT2 = { 'h1': '#ffffff',
'bg': '#ea6060'};
templatingFactory.setTheme(newT2);
};
$scope.themeThree = function() {
var newT3 = { 'h1': '#ea6060',
'bg': '#ffffff'};
templatingFactory.setTheme(newT3);
};
//listen for new themes
$scope.watchThemes = templatingFactory.getTheme();
$scope.$watch(templatingFactory.getTheme, function (newTheme) {
$scope.themeStore = newTheme;
});
,然后在模板/视图本身我做这样的事情 -
<h3 ng-style="{ 'color' : themeStore.h1 }">Title</h3>
所以我的问题是,这工作正常内六EW。但是,ng-view标签位于主体内部,外部是主体容器,以及我希望能够使用此主题对象挂钩的页眉和页脚菜单。所以我的问题是,有没有办法在ng-view之外使用该范围?我不认为这是可能的,但我不知道我还可以如何访问,并在页眉页脚和正文上放置ng样式,以使用此方法更改一些CSS。
所以对于一个简单的参考,它看起来像这样 -
<body ng-app="myApp">
<div class="container">
<div class="header" ng-style="{ 'background-color' : themeStore.bg }">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars"></i>
</button>
<div class="headerLogo"></div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
<div ng-view class="velocity-opposites-transition-slideUpIn" data-velocity-opts="{ duration: 500 }" ng-style="{ 'background-color' : themeStore.bg }"> </div>
<div class="footer">
<p></p>
</div>
</div>
</body>
因此,大家可以看到 - 我试图钩住头部来改变背景颜色,不喜欢这个工作。我注意到的是,如果我把它放在ng-view div上,它就可以正常工作。
我非常感谢任何输入,因为我一直坚持这一段时间。感谢您花时间阅读!
我是新来的角,所以我可能是但我认为这个问题可能会帮助你:http://stackoverflow.com/questions/12008908/how-can-i-pass-variables-between-controllers – coopersita 2014-12-01 18:22:45
@coopersita非常感谢你的回应!我遇到的问题实际上并没有在控制器之间传递,我可以保存在工厂中,并且它在所有控制器中工作得非常好,它在视图外部访问以标记到标题上并且这样(不在视图内) – ajmajmajma 2014-12-01 18:26:08
可能需要在观看templatingFactory服务的头部上有第二条指令,并根据getTheme()返回的内容更新它的视图。 – Jase 2014-12-01 19:00:08