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

Binding array to directive variable in AngularJS

提问by Organiccat

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 "["

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

Here is a simplified setup of the data:

这是数据的简化设置：

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

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

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

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

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?

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

回答by Shai Reznik - HiRez.io

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

您需要将“@”更改为“=”并在没有{{}}的情况下传入数组

like this:

像这样：

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

directive:

指示：

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

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).

发生这种情况是因为由 @ 定义的 directuve 属性中的每个表达式都仅作为字符串进行评估，而在另一种方式中，它作为绑定表达式进行评估。（有 2 路绑定，所以要小心）。

回答by Danita

If you would prefer not creating an isolate scope in the directive (such as when creating custom validation directives) you could pass the array as:

如果您不想在指令中创建隔离范围（例如在创建自定义验证指令时），您可以将数组传递为：

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

And then read the value in the linking function of the directive as:

然后将指令的链接函数中的值读取为：

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

回答by Sohan Soni

Just to add to the reply of Danita, you will have to use $evalfor fetching this scope variable:

只是为了添加到 Danita 的回复中，您必须使用$eval来获取此范围变量：

Just change

只是改变

var myVars = scope[attrs.model]; 

to

到

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

回答by Alexander

Just another perspective - if the problem is just managing an array of strings in angular application I would use one of the following (or any similar):

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

1. ngTagsInput
2. angular select2 with Tags mode
3. ngList

1. ngTags输入
2. 带有标签模式的角度选择2
3. 列表

Unless you are practicing creating your own angular directives (then just ignore my answer)

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