使用Ionic Framework更改點擊CSS樣式表

我有一個基本的離子應用程序，並且想要基於用戶輸入應用三種不同樣式表之一。使用Ionic Framework更改點擊CSS樣式表

頁面將預先加載基本樣式，然後用戶可以選擇其他兩個選項，到目前爲止原始樣式已加載，並且我可以在控制檯中記錄變量的更改，但頁面未更新。這裏是我的代碼：

HTML INDEX：

<!DOCTYPE html> 
<html ng-app="greenwichFitness" ng-controller='SettingsCtrl'> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 

    <link ng-href="{{style}}" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 

    <script src="http://maps.googleapis.com/maps/api/js"></script> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 
    <script src="cordova.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/controllers.js"></script> 
    <script src="js/services.js"></script> 
    </head> 
    <body ng-controller='SettingsCtrl'> 

    <ion-nav-view></ion-nav-view> 

    <ion-nav-bar class="bar-calm"> 
     <ion-nav-back-button></ion-nav-back-button> 
    </ion-nav-bar> 

    </body> 
</html>

HTML視圖：

<div class="list"> 
    <label class="item item-input item-select"> 
    <div class="input-label"> 
     Accessibility Views 
     </div> 
     <select ng-model='option' ng-change='changeView(option)'> 
     <option ng-selected='style'>Plain</option> 
     <option>Larger Text</option> 
     <option>Inverted Colours</option> 
     </select> 
    </label> 
</div>

控制器：

.controller('SettingsCtrl', function($scope, Settings) { 

    $scope.style = Settings.style; 

    $scope.changeView = function(newView) { 
    Settings.changeView(newView); 
    }; 
})

服務：

.factory('Settings', function() { 

     var defaultStyle = 'lib/ionic/css/ionic.css'; 

     var styles = { 'Plain': defaultStyle, 
        'Larger Text': 'lib/ionic/css/ionic-large.app.css', 
        'Inverted Colours': 'lib/ionic/css/ionic-invert.app.css' } 

     var o = { notifications: false, frequency: 'Daily', style: defaultStyle }; 

     o.changeView = function(newView) { 
     o.style = styles[newView]; 
     }; 
)}

任何幫助將不勝感激。

來源

2015-07-21 PhilBrockwell

html標記具有SettingsCtrl以及body標記。刪除其中一個。 –

不知道這是你腦子裏想的是什麼，但我得到了它與下面的代碼工作：

控制器：

$scope.settings = Settings;

HTML：

<link ng-href="{{settings.style}}" rel="stylesheet">

來源

2015-07-21 16:04:18 PhilBrockwell

HTML標記有SettingsCtrl以及BODY標記。刪除其中一個。

此外，風格似乎只是在工廠改變。在SettingsCtrl範圍內的樣式沒有改變。因此，您可以創建changeView返回樣式並將其分配給作用域中的樣式變量。

o.changeView = function(newView) { 
     o.style = styles[newView]; 
     return o.style 
     };

然後在控制器：

$scope.changeView = function(newView) { 
    $scope.style = Settings.changeView(newView); 
    };

來源

2015-07-21 15:34:15

使用Ionic Framework更改點擊CSS樣式表

回答

相關問題