如何使用AngularJS动态更新.less文件中的变量 [英] How to update variables in .less file dynamically using AngularJS
问题描述
我对AngularJS非常陌生.我想动态更新.less文件变量.但是没有获得如何使用AngularJS访问此.less文件的方法.
I am very much new to AngularJS. I want to update the .less files variable dynamically. But didn't get how to access this .less file using AngularJS.
我的代码:
style.less
style.less
@bg-color: #484848;
.header{
background: @bg-color;
}
我想将style.less文件中存在的@bg-color: #484848;更新为用户输入的某些值.我该如何使用AngularJS做到这一点.
I want to update @bg-color: #484848; present in the style.less file to some value input by user. How can I get this using AngularJS.
推荐答案
您应在浏览器中运行更少即可执行此操作.如果在HTML中加载less.js，则全局less对象可用，因此可以在angularJS代码内使用less.modifyVars() 和:less.refreshStyles()
You should run Less in browser to do this. If you load less.js in your HTML, the global less object come available, so you can use less.modifyVars() and inside your angularJS code: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/5b1HTkneFXLMGVxEG8j http://plnkr.co/edit/Z9tRY3Lol31PMnPUfxQi
这篇关于如何使用AngularJS动态更新.less文件中的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
