Javascript 将数组绑定到AngularJS中的指令变量

我试图将数组放入模板中，以便使用其中的单个值。我的问题是，一旦在模板中，属性就变成了字符串，因此它不再作为{{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
    }
});

指令（'myCustomerVars'，函数（$compile）{ 返回{ 限制：'E'， 范围：{ 值：“@” }, 模板： ''+ “

这里有些东西+ ' - '+ ''+ '', 替换：正确 } }); 因此，如果我尝试使用值[0]我得到[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
    }
});

指令（'myCustomerVars'，函数（$compile）{ 返回{ 限制：'E'， 范围：{ 值：“=” }, 模板： ''+ “

这里有些东西+ ' - '+ ''+ '', 替换：正确 } });

---

之所以会发生这种情况，是因为@directuve属性中的每个表达式仅作为字符串计算，而另一种方式是作为绑定表达式计算。（使用双向绑定时，请小心）。

如果您不希望在指令中创建隔离作用域（例如在创建自定义验证指令时）您可以通过以下方式传递数组：

<my-customer-vars model="varForward">

然后读取指令链接函数中的值，如下所示：

directive('myCustomerVars', function($compile) {
    return {
        restrict: 'E',
        link: function (scope, elm, attrs, ctrl) {
            var myVars = scope[attrs.model]; // <--- took a time to figure out
            console.log(myVars);
        }
    }
});

指令（'myCustomerVars'，函数（$compile）{ 返回{ 限制：'E'， 链接：函数（范围、elm、属性、ctrl）{

---

var myVars=scope[attrs.model]；//要添加到Danita的回复中，您必须使用

$eval

获取此范围变量：

换衣服

var myVars = scope[attrs.model]; 

到

---

另一种观点——如果问题只是在angular应用程序中管理字符串数组，我将使用以下方法之一（或任何类似方法）：

---

除非您正在练习创建自己的角度指令（然后忽略我的答案）

谢谢，这很好！我对范围变量并不完全满意，但这有助于澄清我的许多问题，包括如何使用它们。现在我们传递的是模型而不是值，我建议

model=“varForward“

然后

范围：{model:'='}”

@ShaiRez这是将数组放入模板中的最佳方式吗？我还是个新手，不知道是否有其他方法。从1.08开始，这是否有效，因为它似乎不适合meYep，它还没有changed@greg这个回答是很久以前的，我想大约是Angular 1.1或1.2的时候。也许它在新的v中不再起作用了版本。我不再使用Angular。谢谢。我希望文档中能更好地解释这一点。

var myVars = scope.$eval(attrs.model);