javascript - 将数组绑定(bind)到 AngularJS 中的指令变量

Question

我正在尝试将一个数组放入模板中，这样我就可以使用其中的各个值。我的问题是该属性一旦进入我的模板就变成了一个字符串，因此它不再可以作为 {{var[0]}} 访问，而是返回“字符串”的第一个字符，通常是“[”

这是数据的简化设置:

"varForward": ["100", "1"],
"varBack": ["1", "100"]

这是与该数据交互的 HTML 文件的简化部分:

<my-customer-vars value="{{varForward}}">
    </address-numbers>
<my-customer-vars value="{{varBack}}">
    </address-numbers>

最后这里有一部分应该用我自己的东西替换自定义标签:

directive('myCustomerVars', function($compile) {
    return {
        restrict: 'E',
        scope: {
            value: "@"
        },
        template:
        '<div>'+
          '<p class="body-text">Some stuff goes here</p>'+
          '<input type="text" name="firstinput" value="{{value[0]}}"> - '+
          '<input type="text" name="secondinput" value="{{value[1]}}">'+
        '</div>',
        replace: true
    }
});

所以我在这里，如果我尝试使用 value[0] 我得到 [ 如果我尝试获取 value[1] 我得到 "等等。在指令模板中使用数组有什么帮助吗？

Answer 1

您需要将“@”更改为“=”并传入不带 {{ }}

的数组

像这样:

<my-customer-vars value="varForward">
    </my-customer-vars>
<my-customer-vars value="varBack">
    </my-customer-vars>

指令:

directive('myCustomerVars', function($compile) {
    return {
        restrict: 'E',
        scope: {
            value: "="
        },
        template:
        '<div>'+
          '<p class="body-text">Some stuff goes here</p>'+
          '<input type="text" name="firstinput" value="{{value[0]}}"> - '+
          '<input type="text" name="secondinput" value="{{value[1]}}">'+
        '</div>',
        replace: true
    }
});

发生这种情况是因为 @ 定义的 directuve 属性中的每个表达式都被评估为仅作为字符串，而以其他方式被评估为绑定(bind)表达式。 (有 2 种方式绑定(bind)，所以要小心)。