Làm thế nào để sử dụng "ng-lặp lại" trong khuôn mẫu của một chỉ thị trong Angular JS?

Question

Tôi mới đến góc JS và tôi đang cố gắng để tạo ra một chỉ thị tùy chỉnh mà sẽ được sử dụng như sau:

<div linkedlist listcolumns="{{cashAccountsColumns}}"></div>

Corrps. khiển sẽ là:

$scope.cashAccountsColumns = [ 
    {"field": "description", "title": "Description"}, 
    {"field": "owner", "title":"Owner"}, 
    {"field": "currentBalance", "title":"Current Balance" } 
]; 

Và mã chỉ là:

return { 
     restrict : 'EA', 
     transclude : false, 
     templateUrl : 'html/linkedlist.html', 
     scope: { 
     listcolumns: "@" 
     }, 
     link : function(scope, element, attrs) { 
     } 
} 

mẫu là:

<table class="box-table" width="100%"> 
    <thead> 
    <tr> 
     <th scope="col" ng-repeat="column in listcolumns"> 
     {{column.title}} 
     </th> 
    </tr> 
    </thead> 
</table> 

Nhưng điều này không hoạt động. tôi không nhận được giá trị của column.title trên màn hình thay vì quá nhiều hàng như sau được thêm vào DOM:

<th ng-repeat="column in listcolumns" scope="col" class="ng-scope ng-binding"></th> 

Answer 1

Đi qua toàn bộ một đối tượng với thuộc tính sẽ không làm việc, bạn phải sử dụng cách kép ràng buộc. Chỉ cần thay đổi ràng buộc @-= và sửa đổi HTML bên dưới để làm cho nó hoạt:

thay đổi đang chỉ:

// ... 
scope: { 
    listcolumns: "=" 
}, 
// ... 

thay đổi mẫu:

<div linkedlist listcolumns="cashAccountsColumns"></div> 

Answer 2

@ AjayBeniwal của câu trả lời là đúng, nhưng tôi cảm thấy như thể nó có thể sử dụng một số giải thích bổ sung.

Khi số Angular documentation chỉ ra (trong phần "Cách ly phạm vi chỉ thị"), tùy chọn scope là đối tượng chứa thuộc tính cho mỗi phạm vi liên kết cô lập. Chúng ta sử dụng nó để tách biệt (cô lập) phạm vi bên trong một chỉ thị từ phạm vi bên ngoài, và sau đó ánh xạ phạm vi bên ngoài đến phạm vi bên trong của chỉ thị.

Tên của mỗi thuộc tính của đối tượng scope tương ứng với chỉ thị phạm vi cô lập thuộc tính. Trong ví dụ của câu hỏi, thuộc tính duy nhất của đối tượng scope là listcolumns. Bởi vì điều này, cần có thêm một thuộc tính tương ứng trên html tạo chỉ thị:

<div linkedlist listcolumns="cashAccountsColumns"></div> 

Tên của scope tài sản và thuộc tính của chỉ thị không được tuy nhiên cần phải có cùng tên.Chúng ta có thể lập bản đồ hai giá trị như thế này:

<div linkedlist short-name="cashAccountsColumns"></div> 

-

controller: function ($scope) { 
    $scope.cashAccountsColumns = 'value'; 
}, 
scope: { 
    moreDescriptiveName: "=shortName" 
}, 

Đối với trường hợp tên thuộc tính cũng giống như giá trị mà bạn muốn để ràng buộc bên trong phạm vi của chỉ thị, bạn có thể sử dụng viết tắt này cú pháp:

<div linkedlist my-name="cashAccountsColumns"></div> 

-

controller: function ($scope) { 
    $scope.cashAccountsColumns = 'value'; 
}, 
scope: { 
    myName: "=" 
}, 

Ngoài ra, trong ví dụ này giá trị của thuộc tính của chỉ thị phải tương ứng với thuộc tính của phạm vi bên ngoài của chỉ thị. Điều này là do = trong =shortName sử dụng liên kết hai hướng của các thuộc tính từ phạm vi bên ngoài đến phạm vi cô lập, buộc giá trị của thuộc tính của chỉ thị được đánh giá dưới dạng một biểu thức. Như this answer hùng hồn chỉ ra, nếu chúng ta thay vì muốn vượt qua một chuỗi chữ, chúng ta có thể sử dụng @ ở vị trí của =, hoặc sorround tài sản phạm vi cô lập của chỉ thị với cả đôi và đơn dấu ngoặc kép:

HOẶC

<div linkedlist short-name="'cashAccountsColumns'"></div>