如何使用AngularJS动态更新.less文件中的变量

我是AngularJS的新手.我想动态更新.less文件变量.但是没有得到如何使用AngularJS访问这个.less文件.

我的代码

style.less

@bg-color: #484848;    
.header{ 
     background: @bg-color;
 }

我想更新@ bg-color:#484848;在style.less文件显示用户输入的某些值.如何使用AngularJS获得此功能.

你应该 run Less in browser这样做.如果在HTML中加载less.js,则可以使用全局less对象,因此可以在angularJS代码中使用less.modifyVars()和less.refreshStyles():
<!doctype html>
<html lang="en">
<head>
  <Meta charset="UTF-8">
  <title>Example - example-example78-production</title>

<link rel="stylesheet/less" type="text/css" href="color.less" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.3.1/less.min.js"></script>

</head>
<body ng-app="submitExample">
  <script>
  angular.module('submitExample',[])
    .controller('ExampleController',['$scope',function($scope) {
      $scope.list = [];
      $scope.text = 'orange';
      $scope.submit = function() {
        if ($scope.text) {
        less.modifyVars({ color : $scope.text });
        }
      };
    }]);
</script>
<h1>Colored text</h1>
<form ng-submit="submit()" ng-controller="ExampleController">
  Enter text and hit enter:
  <input type="text" ng-model="text" name="text" />
  <input type="submit" id="submit" value="Submit" />
</form>
</body>
</html>

见:http://plnkr.co/5b1HTkneFXLMGVvXEG8j http://plnkr.co/edit/Z9tRY3Lol31PMnPUfxQi

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...