Sử dụng các ký hiệu '@', '&', '=' và '>' trong phạm vi ràng buộc của chỉ thị tùy chỉnh: AngularJS

Question

Tôi đã đọc rất nhiều về việc sử dụng các biểu tượng này trong việc triển khai các chỉ thị tùy chỉnh trong AngularJS. vẫn không rõ ràng với tôi. Ý tôi là, có nghĩa là gì nếu tôi sử dụng một trong các giá trị phạm vi trong chỉ thị tùy chỉnh?

var mainApp = angular.module("mainApp", []); 
 
mainApp.directive('modalView',function(){ 
 
    return{ 
 
    restrict:'E', 
 
    scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true 
 
    } 
 
});

Chúng ta đang làm gì chính xác với phạm vi ở đây?

Tôi cũng không chắc chắn liệu "phạm vi: '>'" có tồn tại trong tài liệu chính thức hay không. Nó được sử dụng trong dự án của tôi.

Sửa-1

Việc sử dụng "phạm vi: '>'" là một vấn đề trong dự án của tôi và nó đã được sửa.

Answer 1

Trong chỉ thị AngularJS, phạm vi cho phép bạn truy cập dữ liệu trong các thuộc tính của phần tử mà chỉ thị được áp dụng.

này được minh họa tốt nhất với một ví dụ:

<div my-customer name="Customer XYZ"></div> 

và định nghĩa chỉ thị:

angular.module('myModule', []) 
.directive('myCustomer', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     customerName: '@name' 
    }, 
    controllerAs: 'vm', 
    bindToController: true, 
    controller: ['$http', function($http) { 
     var vm = this; 

     vm.doStuff = function(pane) { 
     console.log(vm.customerName); 
     }; 
    }], 
    link: function(scope, element, attrs) { 
     console.log(scope.customerName); 
    } 
    }; 
}); 

Khi scope tài sản được sử dụng chỉ thị ở chế độ cái gọi là "phạm vi cô lập", có nghĩa là nó không thể truy cập trực tiếp vào phạm vi của bộ điều khiển cha.

Trong điều kiện rất đơn giản, ý nghĩa của những biểu tượng ràng buộc là:

someObject: '=' (hai chiều dữ liệu ràng buộc)

someString: '@' (chuyển trực tiếp hoặc thông qua nội suy với đôi dấu ngoặc nhọn ký hiệu {{}})

someExpression: '&' (ví dụ:hideDialog())

Thông tin này có trong AngularJS directive documentation page, mặc dù phần nào được lan truyền khắp trang.

Biểu tượng > không phải là một phần của cú pháp.

Tuy nhiên, < không tồn tại như một phần của AngularJS component bindings và có nghĩa là một cách ràng buộc.

Answer 2

> không có trong tài liệu.

< là dành cho liên kết một chiều.

@ ràng buộc là để truyền chuỗi. Các chuỗi này hỗ trợ các biểu thức {{}} cho các giá trị nội suy.

= ràng buộc là ràng buộc mô hình hai chiều. Mô hình trong phạm vi cha mẹ được liên kết với mô hình trong phạm vi cô lập của chỉ thị.

& ràng buộc là để chuyển một phương thức vào phạm vi chỉ thị của bạn để nó có thể được gọi trong chỉ thị của bạn.

Khi chúng tôi đang thiết lập phạm vi: đúng theo chỉ thị, Angular js sẽ tạo một phạm vi mới cho chỉ thị đó. Điều đó có nghĩa là bất kỳ thay đổi nào được thực hiện cho phạm vi chỉ thị sẽ không phản ánh lại trong bộ điều khiển chính.

Answer 3

AngularJS documentation on directives được viết khá tốt cho ý nghĩa của các biểu tượng.

Để được rõ ràng, bạn không thể chỉ có

scope: '@' 

trong một định nghĩa chỉ thị. Bạn phải có các thuộc tính mà các ràng buộc đó áp dụng, như sau:

scope: { 
    myProperty: '@' 
} 

Tôi đề nghị bạn đọc tài liệu và hướng dẫn trên trang web. Có nhiều thông tin bạn cần biết về phạm vi độc lập và các chủ đề khác.

Đây là một trích dẫn trực tiếp từ trang ở trên liên kết, liên quan đến các giá trị của scope:

Thuộc tính phạm vi có thể là đúng, một đối tượng hoặc một giá trị falsy:

• falsy: Sẽ không có phạm vi nào được tạo cho chỉ thị. Chỉ thị sẽ sử dụng phạm vi của phụ huynh.

• true: Phạm vi con mới được thừa kế nguyên mẫu từ cha mẹ sẽ được tạo cho phần tử của chỉ thị. Nếu nhiều lệnh trên cùng một phần tử yêu cầu một phạm vi mới, thì chỉ có một phạm vi mới được tạo. Quy tắc phạm vi mới không áp dụng cho gốc của mẫu vì gốc của mẫu luôn nhận được phạm vi mới.

• {...}(băm đối tượng): Phạm vi "cô lập" mới được tạo cho phần tử của chỉ thị. Phạm vi 'cô lập' khác với phạm vi bình thường ở chỗ nó không được thừa kế nguyên mẫu từ phạm vi cha mẹ của nó. Điều này rất hữu ích khi tạo các thành phần có thể sử dụng lại, không nên vô tình đọc hoặc sửa đổi dữ liệu trong phạm vi cha mẹ.

^{Lấy 2017/02/13 từ https://code.angularjs.org/1.4.11/docs/api/ng/service/ $ biên dịch # -scope-, được cấp phép như CC-by-SA 3.0}

Answer 4

Khi chúng ta tạo ra một chỉ thị của khách hàng, phạm vi của chỉ thị có thể là trong phạm vi Isolated , Nó có nghĩa là chỉ thị không chia sẻ phạm vi với bộ điều khiển; cả chỉ thị và bộ điều khiển đều có phạm vi riêng. Tuy nhiên, dữ liệu có thể được chuyển đến phạm vi chỉ thị theo ba cách có thể.

1. Dữ liệu có thể được chuyển thành chuỗi bằng cách sử dụng giá trị chuỗi ký tự theo chuỗi, @.
2. Dữ liệu có thể được truyền dưới dạng đối tượng bằng cách sử dụng đối tượng chuỗi, đối tượng qua đường, =, liên kết 2 cách.
3. Dữ liệu có thể được truyền dưới dạng hàm & chuỗi chữ, gọi hàm bên ngoài, có thể truyền dữ liệu từ chỉ thị đến bộ điều khiển.

Answer 5

<: một chiều ràng buộc

=: hai chiều ràng buộc

&: chức năng ràng buộc

@: vượt qua chỉ chuỗi