Mảng liên kết với biến chỉ thị trong AngularJS

Question

Tôi đang cố gắng lấy một mảng vào một mẫu để tôi có thể sử dụng các giá trị của chúng. Vấn đề của tôi là thuộc tính biến thành chuỗi một lần bên trong mẫu của tôi để nó không còn truy cập được như {{var [0]}} và thay vào đó sẽ trả về ký tự đầu tiên của "chuỗi", thường là "["

Dưới đây là một thiết lập đơn giản của dữ liệu:

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

đây là một phần đơn giản hóa của tập tin HTML mà tương tác với dữ liệu đó:

<my-customer-vars value="{{varForward}}"> 
    </address-numbers> 
<my-customer-vars value="{{varBack}}"> 
    </address-numbers> 

và cuối cùng ở đây là một phần đó là nghĩa vụ để thay thế thẻ tùy chỉnh với nội dung của riêng tôi:

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

Vì vậy, ở đây tôi, nếu tôi thử sử dụng giá trị [0] tôi nhận được [Nếu tôi cố gắng nhận giá trị [1] tôi nhận được "v.v. Có sự trợ giúp nào về việc sử dụng các mảng bên trong khuôn mẫu của một chỉ thị không?

Answer 1

Bạn cần phải thay đổi "@" vào "=" và để vượt qua trong mảng mà không {{}}

như thế này:

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

chỉ:

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

Điều này xảy ra vì mọi biểu thức bên trong một thuộc tính directuve được xác định bởi một @ được đánh giá chỉ như một chuỗi và theo cách khác nó được đánh giá là biểu thức ràng buộc. (với 2 cách ràng buộc, vì vậy hãy cẩn thận).

Answer 2

Nếu bạn muốn không tạo ra một phạm vi cô lập trong các chỉ thị (ví dụ như khi tạo chỉ thị xác nhận tùy chỉnh), bạn có thể vượt qua các mảng như:

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

Và sau đó đọc giá trị trong chức năng liên kết của Chỉ thị như:

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

Chỉ cần để thêm vào câu trả lời của Danita, bạn sẽ phải sử dụng $eval cho việc lấy phạm vi biến này:

Chỉ cần thay đổi

var myVars = scope[attrs.model]; 

để

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

Answer 4

Chỉ cần một góc nhìn - nếu vấn đề chỉ là quản lý một mảng các chuỗi trong ứng dụng góc Tôi sẽ sử dụng một trong các cách sau (hoặc bất kỳ tương tự):

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

Trừ khi bạn đang thực hành tạo ra chỉ thị góc riêng của bạn (sau đó chỉ cần bỏ qua câu trả lời của tôi)