AngularJs Truyền dữ liệu phức tạp để chỉ thị

Question

Tôi có chỉ thị sau:

<div teamspeak details="{{data.details}}"></div> 

này là cấu trúc đối tượng:

data: { 
       details: { 
        serverName: { type: 'text', value: 'my server name' }, 
        port: { type: 'number', value: 'my port' }, 
        nickname: { type: 'text' }, 
        password: { type: 'password' }, 
        channel: { type: 'text' }, 
        channelPassword: { type: 'password' }, 
        autoBookmarkAdd: { type: 'checkbox' } 
       } 
} 

và tôi muốn nó để tạo ra một liên kết dựa trên các dữ liệu bên trong data.details vật. Đáng tiếc là nó không hoạt động kể từ bằng cách nào đó tôi cann't truy cập vào bất kỳ giá trị bên trong của đối tượng details, nhưng nếu tôi đi qua nó một cấu trúc dữ liệu đơn giản như:

<div teamspeak details="{{data.details.serverName.value}}"></div> 

tôi có thể truy cập nó bằng cách sử dụng {{details}} .

Đây là Mã Chỉ thị của tôi:

App.directive('teamspeak', function() { 
    return { 
     restrict: 'A', 
     template: "<a href='ts3server://{{details.serverName.value}}:{{details.port.value}}'>Teamspeak Server</a>", 
     scope: { 
      details: '@details', 
     }, 
     link: function (scope, element, attrs) { 
     } 
    }; 
}); 

Cảm ơn

Answer 1

đọc trên Angularjs official site giải thích:

@ hoặc @attr - ràng buộc một tài sản phạm vi địa phương với giá trị của DOM thuộc tính. Kết quả luôn là một chuỗi vì thuộc tính DOM là chuỗi. Nếu không có tên attr nào được chỉ định thì tên thuộc tính là được giả định giống với tên địa phương. Định nghĩa về phạm vi và tiện ích con: {localName: '@ myAttr'}, thì thuộc tính phạm vi tiện ích localName sẽ phản ánh giá trị nội suy của hello {{name}}. Vì thuộc tính name thay đổi nên thuộc tính local name trên phạm vi tiện ích sẽ là thuộc tính localName. Tên được đọc từ phạm vi phụ huynh (không phải phạm vi thành phần).

Vì vậy, bạn chỉ có thể gửi một chuỗi, để chuyển một đối tượng, bạn cần phải thiết lập ràng buộc hai hướng bằng cách sử dụng =.

scope: { 
     details: '=', 
    }, 

Và HTML chí của bạn trông như

<div teamspeak details="data.details"></div> 

Answer 2

Có người hỏi về cách để làm điều đó mà không cần cách ly phạm vi, đây là một giải pháp:

<div teamspeak details="{{data.details}}"></div>

App.directive('teamspeak', function() { 
    return { 
     restrict: 'A', 
     template: "<a href='ts3server://{{details.serverName.value}}:{{details.port.value}}'>Teamspeak Server</a>", 
     link: function (scope, element, attrs) { 
      if(attrs.details){ 
       scope.details = scope.$eval(attrs.details); 
      } 
     } 
    }; 
}); 

Chúng ta có thể thậm chí sử dụng $interpolate nếu có bất kỳ giá trị nào trong attrs.details sh Ould được tự động thiết lập với góc {{...}} biểu ...

scope.details = scope.$eval($interpolate(attrs.details)(scope));

(đừng quên tiêm $interpolate dịch vụ vào thị của bạn)

Lưu ý quan trọng: Tôi có không thử nghiệm phương pháp này với góc 2.