Change CSS Style Sheet on click with Ionic Framework

Question

I have a basic Ionic App and would like to apply one of three different style sheets based on a User Input.

The page will be pre-loaded with the basic style, then a user can select two other options, so far the original style is loaded and I can console log a change in the variable, but the page is not updated. Here is my code:

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 VIEW:

<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:

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

  $scope.style = Settings.style;

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

SERVICE:

    .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];
      };
)}

Any help would be greatly appreciated.

html tag has SettingsCtrl as well body tag. Remove one of them. — Bipin Bhandari
– Bipin Bhandari, Commented Jul 21, 2015 at 15:27

Bipin Bhandari · Accepted Answer · 2015-07-21 15:34:15Z

0

HTML tag has SettingsCtrl as well BODY tag. Remove one of them.

Also the style seems to be changing only on the factory. style in the scope of SettingsCtrl is not changed. So you can make the changeView return style and assign it to the style variable in the scope.

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

And then in controller:

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

answered Jul 21, 2015 at 15:34

Bipin Bhandari

2,69225 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Phil Brockwell · Accepted Answer · 2015-07-21 16:04:18Z

0

Not sure if this is what you had in mind but I got it to work with the following code:

Controller:

  $scope.settings = Settings;

HTML:

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

answered Jul 21, 2015 at 16:04

Phil Brockwell

4657 silver badges22 bronze badges

Collectives™ on Stack Overflow

Change CSS Style Sheet on click with Ionic Framework

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related