Question

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

以下是数据的简化设置：

"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]我得到“等等。在指令模板中使用数组有什么帮助吗？ / p>

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

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

ngTagsInput
angular select2 with Tags mode
ngList

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

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

4 个答案: