1

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

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

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

任何帮助将不胜感激。

4

2 回答 2

0

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-21T15:34:15.360 回答
0

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

控制器：

  $scope.settings = Settings;

HTML：

<link ng-href="{{settings.style}}" rel="stylesheet">
于 2015-07-21T16:04:18.053 回答