使用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样式表

回答

相关问题