角度，訪問範圍以外的ng視圖環繞div

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

我非常感謝任何輸入，因爲我一直堅持這一段時間。感謝您花時間閱讀！

來源

2014-12-01 ajmajmajma

我是新來的角，所以我可能是但我認爲這個問題可能會幫助你：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

您的ng-view之外的DOM元素必須擁有自己的控制器，並且將templatingFactory注入爲依賴項。

首先，我會修改HTML像這樣：

<div class="header" ng-controller="headerController" ng-style="{ 'background-color' : themeStore.bg }">

然後加入headerController到你的模塊：

angular.module('demoApp').controller('headerController', function($scope, templatingFactory){ 
    $scope.themeStore = templatingFactory.getTheme(); 

    $scope.$watch(templatingFactory.getTheme, function (newTheme) { 
     $scope.themeStore = newTheme; 
    }); 

});

更可重複使用的解決方案是創建一個指示，增加了該控制器的功能，不管DOM元素應用於哪個DOM元素，但上面的內容更直截了當。

來源

2014-12-01 19:47:21 SteamDev

我認爲在ui-view或ng-view之外使用角度函數和變量的最佳方式是使用全局服務。在這種情況下，你應該在'templatingFactory'中執行你的主題邏輯。然後注入這個服務不是在你的控制器中，而是在你的模塊中。

angular.module('demoApp').run(['$rootScope', 'templatingFactory', function($rootScope, templatingFactory){ 

    $rootScope.templatingService = templatingFactory; 

}]);

因此，您的服務將在$ rootScope中可用。現在你可以這樣使用它。

<body ng-app="myApp"> 
<div class="container"> 

    <div class="header" ng-style="{ 'background-color' : templatingService.getTheme().bg }"> </div> 
</div> 
</div>

ps：我在角度上也相對比較新，所以對於好的/錯誤的做法我一無所知！

來源

2014-12-01 20:56:52

對於指令的方式，一個簡單的例子可能是這個樣子：

demoApp.directive('themeHeader', function (templatingFactory) { 
    return { 
     restrict: 'A', 
     link : function (scope, element, attrs) { 

      scope.$watch(templatingFactory.getTheme, function() { 
       element.css('background-color', newTheme.bg); 
      }); 
     } 
    } 
});

和HTML是這樣的：

<div theme-header> 
     <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>

來源

2014-12-02 20:17:28 Jase

角度，訪問範圍以外的ng視圖環繞div

回答

相關問題