32

我正在尝试将数组放入模板中，以便可以使用其中的个人值。我的问题是该属性在我的模板中变成了一个字符串，因此它不再可以作为 {{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] 我会得到 " 等等。在指令模板中使用数组有什么帮助吗？

4

4 回答 4

46

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

像这样：

<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 属性中的每个表达式都被评估为仅作为字符串，而以另一种方式，它被评估为绑定表达式。（有 2 路绑定，所以要小心）。

于 2013-02-04T21:20:20.187 回答
16

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

<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);
        }
    }
});
于 2013-08-27T23:44:59.047 回答
6

只是为了添加到 Danita 的回复中，您将不得不$eval用于获取此范围变量：

只是改变

var myVars = scope[attrs.model];

到

var myVars = scope.$eval(attrs.model);
于 2014-12-29T12:36:16.273 回答
0

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

  1. ngTagsInput
  2. 带标签模式的角度选择2
  3. 列表

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

于 2016-09-07T17:55:38.077 回答