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>

然后不要这样打电话：

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

使用less.modifyVars（）和angular重新编译较少的css

1 个答案: