结合阵列指令在AngularJS变量 [英] Binding array to directive variable in AngularJS

问题描述

我试图让一个数组成模板，所以我可以使用其个人价值。我的问题是，属性变成一个字符串一旦我的模板内，因此不再为{{VAR [0]}}，这将直接返回字符串的第一个字符，通常是[

I'm trying to get an array into a template so I can use the individuals values thereof. My problem is that the attribute turns into a string once inside my template so it's no longer accessible as {{var[0]}} and that will instead return the first character of the "string", usually "["

下面是数据的简化设置：

Here is a simplified setup of the data:

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

下面是与该数据交互HTML文件的简化部分：

Here is a simplified portion of the HTML file that interacts with that data:

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

和最后这里是应该有我自己的东西，以取代自定义标签的部分内容：

and lastly here is a portion that is SUPPOSED to replace the custom tag with my own stuff:

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
    }
});

所以我在这里，如果我尝试使用值[0]我得到[如果我试图让值[1]我得到等等。是否有使用指令的模板内阵列任何帮助吗？

So here I am, if I try using value[0] I get [ If I try to get value[1] I get " and so on. Is there any help on using arrays inside the template of a directive?

推荐答案

您需要更改@到=和数组中传递，而不{{}}

You need to change the "@" into "=" and to pass in the array without the {{ }}

是这样的：

<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
    }
});

这是发生，因为由@定义的directuve属性中每前pression得到，因为只有作为一个字符串进行评估，并在其他的方式它被评价为具有约束力的前pression。 （与2路的结合，所以要小心）。

This is happening because every expression inside a directuve attribute defined by a @ gets evaluated as only as a string, and in the other way it gets evaluated as binding expression. (with 2 way binding, so be careful).

这篇关于结合阵列指令在AngularJS变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！