我想在我的應用程序設置自定義主題,所以我正在做的是讓用戶選擇某些主題,它將全面更改應用程序主題。我有一個服務,發送一塊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