javascript - 使用范围变量作为函数中的参数并使用其引用而不是值

Question

我想尝试在我的 Controller 中使用一个通用函数，我可以在我的 View 中使用它来通知范围内的特定变量更改为特定值。

简化示例

Controller

$scope = {
    hair: {
        color: 'blue',
        length: '2cm'
    },
    mouth: 'wide',
    arms: [
        {
            fingers: 5,
            color: 'brown'
        },
        {
            fingers: 4,
            color: 'white'
        }
    ]
}

$scope.updateVariable = function(scopeVariable, value){
    scopeVariable = value;
}

查看

<a ng-click="updateVariable(hair.color, 'red');">red hair</a>
<a ng-click="updateVariable(hair.length, '5cm');">increase hair length</a>
<a ng-click="updateVariable(mouth, 'narrow');">narrow mouth</a>
<a ng-click="updateVariable(arms[0].fingers, 4);">4 fingers</a>

似乎只有变量的值被传递给函数而不是引用。有没有办法让我从函数参数中获取对范围变量的引用而不是它的值？此外，这可以动态完成吗？我的意思是我需要将“路径”传递到该变量在范围内的位置。

我知道这可以通过独立的 setter 函数(即:setMouth('narrow'))来完成，但是为了这个练习，我们假设我们事先不知道 Controller 中作用域的结构，但是仅在 View 中，因此我们需要一个可以处理属性的通用函数。

Answer 1

It seems only the value of the variable is passed on to the function but not the reference.

正确。

Is there a way for me to get the reference to the scope variable instead of it's value from a function parameter?

不，JavaScript 根本没有那个(称为通过引用传递)。相反，您可以传递变量的名称，然后在您的函数中使用该名称:

<a ng-click="updateVariable('hair.color', 'red');">red hair</a>
<a ng-click="updateVariable('hair.length', '5cm');">increase hair length</a>
<a ng-click="updateVariable('mouth', 'narrow');">narrow mouth</a>
<a ng-click="updateVariable('arms[0].fingers', 4);">4 fingers</a>

然后应用 this question and its answers 中的技术从路径更新 $scope。调整来自 the answer by Alnitak 的函数使其成为二传手:

Object.setByString = function(o, s, value) {
    s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
    s = s.replace(/^\./, '');           // strip a leading dot
    var a = s.split('.');
    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in o) {
            if (i == n - 1) {
                o[k] = value;
                return value;
            }
            o = o[k];
        } else {
            return value;
        }
    }
    return value;
};

然后

$scope.updateVariable = function(scopeVariablePath, value){
    Object.setByString($scope, scopeVariablePath, value);
};