将数组绑定到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
    }
});

因此，如果我尝试使用值[0]，我会得到[如果我尝试获得值[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属性中的每个表达式都只被计算为字符串，而另一方面，它被计算为绑定表达式。（有双向绑定，所以要小心）。

Answer 2

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

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

Answer 3

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

只需更改

var myVars = scope[attrs.model]; 

至

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

Answer 4

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

1. ng标记输入
2. 带标记模式的角度选择2
3. ngList

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