Angularjs chỉ thị phạm vi cô lập + một chiều ràng buộc dữ liệu không hoạt động cho các đối tượng?

Question

Tôi đã tạo một chỉ thị tùy chỉnh có hai giá trị. đầu tiên là đối tượng config và thứ hai là đối tượng dữ liệu. Tôi sửa đổi cấu hình này và các đối tượng dữ liệu bên trong chỉ thị của tôi, nó phản ánh nó trong phạm vi cha mẹ. Điều này gây ra lỗi cho tôi khi tôi phải sử dụng chỉ thị nhiều lần.

Tôi đã theo dõi https://umur.io/angularjs-directives-using-isolated-scope-with-attributes/ và tôi đang sử dụng phạm vi phân lập.

Tôi muốn gắn kết một cách dữ liệu cho các đối tượng trong phạm vi phân lập. Bất cứ điều gì tôi thay đổi trong chức năng chỉ thị nó không nên phản ánh trong phạm vi phụ huynh.

bên dưới là phạm vi chỉ thị.

scope: { 
    config: "&config", 
    dataObj: "&dataObj" 
} 

ở đây là làm thế nào tôi truy cập vào nó trong hàm liên kết của chỉ thị

var config = scope.config(); 
var dataObj= scope.dataObj(); 

Tôi giả định rằng vượt qua bằng cách tham chiếu đang xảy ra ở đây.

Tôi đang thêm JSbin. kiểm tra giao diện điều khiển giá trị của đối tượng đang thay đổi và phản ánh trong phạm vi cha mẹ.

https://jsbin.com/vagowe/edit?html,js,output

Answer 1

qua văn bản là one-way binding(@) và đi qua đối tượng là two-way binding(=)

đi qua đối tượng dưới dạng văn bản

<custom-directive config="{{config}}"></custom-directive> 

phạm vi trong chỉ thị

scope: { 
     config: "@" 
    } 

chuyển kí trở lại đối tượng trong liên kết

var config = angular.fromJson(scope.config); 

Answer 2

Bạn đúng, vấn đề là đối tượng JavaScript của bạn đang được chuyển bằng tham chiếu. Sử dụng liên kết một chiều sao chép tham chiếu, nhưng tham chiếu sẽ vẫn trỏ đến cùng một đối tượng.

ấn tượng của tôi từ Angular docs for directives luôn luôn là:

• Các '@' ràng buộc dành cho chuỗi nội suy
• Các '=' ràng buộc dành cho cấu trúc dữ liệu cần được chia sẻ giữa các phạm vi
• Ràng buộc '&' được thiết kế để lặp lại việc thực hiện một biểu thức được gắn với phạm vi cha mẹ

Nếu bạn wan t để điều trị các đối tượng ràng buộc từ cha mẹ như không thay đổi, bạn có thể tạo một bản sao sâu các đối tượng bên trong mã liên kết của bạn sử dụng angular.copy:

var config = angular.copy(scope.config()); 
var dataObj = angular.copy(scope.dataObj()); 

Ngoài ra, bạn có thể sử dụng một chiều hai ràng buộc cho điều này và sao chép các đối tượng theo cùng một cách:

scope: { 
    config: "=", 
    dataObj: "=" 
} 

// ... 
// Inside the link function of the directive. 
// Note that scope.config and scope.dataObj are no longer functions! 

var config = angular.copy(scope.config); 
var dataObj = angular.copy(scope.dataObj);