Html 使用Ionic Framework在单击时更改CSS样式表_Html_Css_Angularjs_Ionic Framework_Angularjs Ng Href

Html 使用Ionic Framework在单击时更改CSS样式表

html css angularjs ionic-framework

Html 使用Ionic Framework在单击时更改CSS样式表,html,css,angularjs,ionic-framework,angularjs-ng-href,Html,Css,Angularjs,Ionic Framework,Angularjs Ng Href,我有一个基本的Ionic应用程序，并希望根据用户输入应用三种不同样式表中的一种页面将预加载基本样式，然后用户可以选择另外两个选项，到目前为止，加载的是原始样式，我可以在控制台中记录变量的更改，但页面不会更新。这是我的密码： HTML索引： <!DOCTYPE html> <html ng-app="greenwichFitness" ng-controller='SettingsCtrl'> <head> <meta charset="ut

我有一个基本的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>

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

服务：

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

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

任何帮助都将不胜感激。

HTML

tag具有

SettingsCtrl

以及

BODY

tag。移除其中一个

而且，这种风格似乎只在工厂发生了变化。

SettingsCtrl

范围内的样式不变。因此，您可以创建changeView返回样式，并将其指定给范围中的样式变量

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

然后在控制器中：

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

  $scope.settings = Settings;

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

  $scope.settings = Settings;

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

控制器：

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

  $scope.settings = Settings;

HTML:

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

控制器：

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

  $scope.settings = Settings;

HTML:

html标记具有SettingsCtrl和body标记。删除其中一个。html标记具有SettingsCtrl和body标记。移除其中一个。