Question

我有一个基本的离子应用程序，并希望根据用户输入应用三种不同样式表中的一种。

页面将预先加载基本样式，然后用户可以选择其他两个选项，到目前为止已加载原始样式，我可以控制日志变量中的变更，但页面不会更新。这是我的代码：

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

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

非常感谢任何帮助。

Answer 1

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

Answer 2

不确定这是否是您的想法，但我使用以下代码：

控制器：

  $scope.settings = Settings;

HTML：

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

单击Ionic Framework更改CSS样式表

2 个答案: