使用 Ionic Framework 更改 CSS 样式 Sheet

Question

我有一个基本的 Ionic 应用程序，想根据用户输入应用三种不同样式表中的一种。

页面将预加载基本样式，然后用户可以 select 两个其他选项，到目前为止原始样式已加载，我可以控制台记录变量中的更改，但是页面未更新。这是我的代码：

HTML 索引：

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

如有任何帮助，我们将不胜感激。

Answer 1

HTML 标签有 SettingsCtrl 以及 BODY 标签。删除其中一个。

而且款式似乎只在出厂时才会改变。 SettingsCtrl 范围内的样式没有改变。所以你可以制作changeView return 样式并将其分配给作用域中的样式变量。

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

然后在控制器中：

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

Answer 2

不确定这是否是您想要的，但我使用以下代码让它工作：

控制器：

  $scope.settings = Settings;

HTML:

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

使用 Ionic Framework 更改 CSS 样式 Sheet

Change CSS Style Sheet on click with Ionic Framework

html

css

angularjs

ionic-framework

angularjs-ng-href