將數組綁定到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屬性中的每個表達式都只被評估爲一個字符串，並且以另一種方式被評估爲綁定表達式。 （2路綁定，所以要小心）。

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. ngTagsInput
2. angular select2 with Tags mode
3. ngList

除非你是練創建自己的角度指令（然後就不理我的回答）