使用 less.modifyVars() 和 angular 将 less 重新编译为 css

Question

我有一个输入列表，由以下人员创建：

<div ng-controller="MainCtrl">
<div ng-repeat="variable in variables">
    <label>{{ variable.slug }}</label>
    <input type="text" ng-model="variable.value" ng-change="variableChange()" />
</div>
</div>

还有一个控制器：

function MainCtrl($scope) {
    $scope.variables = [
        {'slug':'background', 'value':'#666'},
        {'slug':'foreground', 'value':'#999'}
    ]
}

我正在使用less.js 在浏览器中编译less，并且我希望能够在变量更改时重新编译它——就像在控制器内部一样：

$scope.variableChange = function() {
    less.modifyVars({ variable.slug : variable.value });
};

但我得到了错误：

ParseError: Unrecognised input in preview-style.less on line 102, column 1:
102@variable.slug: variable.value;

但如果我删除变量的撇号，我会得到一个角度错误：

Bad Argument: Argument 'MainCtrl' is not a function, got undefined

有人可以帮忙吗？

编辑：如果有帮助，这里是 less.modifyVars() 函数：

less.modifyVars = function (a) {
    var b = "";
    for (var c in a) b += ("@" === c.slice(0, 1) ? "" : "@") + c + ": " + (";" === a[c].slice(-1) ? a[c] : a[c] + ";");
    less.refresh(!1, b)
}

Answer 1

如果您在控制器内部编写，则必须使用$scope 处理作用域属性：

$scope.variableChange = function() {
    less.modifyVars({ $scope.variable.slug : $scope.variable.value });
};

但由于ng-repeat，这不会让这个例子工作。

最好将对象传递给函数：

<div ng-controller="MainCtrl">
<div ng-repeat="variable in variables">
    <label>{{ variable.slug }}</label>
    <input type="text" ng-model="variable.value" ng-change="variableChange(variable)" />
</div>
</div>

然后像这样调用less：

$scope.variableChange = function(selectedVariable) {
    less.modifyVars({ selectedVariable.slug : selectedVariable.value });
};