我是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
