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

Tôi đã đọc rất nhiều về việc sử dụng các biểu tượng này trong việc thực hiện các chỉ thị tùy chỉnh trong AngularJS nhưng khái niệm này vẫn chưa rõ ràng đối với tôi. Ý tôi là, điều đó 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ính xác thì chúng ta đang làm gì với phạm vi ở đây?

Tôi cũng không chắc 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.

Chỉnh sửa-1

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

Trong một lệnh 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à lệnh được áp dụng.

Điều 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 thuộc scopetính được sử dụng, lệnh này ở chế độ "phạm vi cách ly", 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 chính.

Nói một cách rất đơn giản, ý nghĩa của các ký hiệu ràng buộc là:

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

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

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

Thông tin này có trong trang tài liệu chỉ thị AngularJS , mặc dù có phần 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ư là một phần của các ràng buộc thành phần AngularJS và có nghĩa là ràng buộc một chiều.

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

< là cho ràng buộc một chiều.

@ràng buộc là để vượt qua 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à cho ràng buộc mô hình hai chiều. Mô hình trong phạm vi cha được liên kết với mô hình trong phạm vi tách biệt của chỉ thị.

& ràng buộc là để truyề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 ta thiết lập phạm vi: true trong chỉ thị, Angular js sẽ tạo ra 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 đối với phạm vi chỉ thị sẽ không phản ánh lại trong bộ điều khiển chính.

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

= ràng buộc hai chiều

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

@ chỉ vượt qua chuỗi

Khi chúng ta tạo một lệnh của khách hàng, phạm vi của lệnh có thể nằm trong phạm vi biệt lập, điều đó có nghĩa là lệnh này 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 truyền dưới dạng chuỗi bằng cách sử dụng @chuỗi ký tự, giá trị chuỗi, ràng buộc một chiều.
2. Dữ liệu có thể được truyền dưới dạng một đối tượng bằng cách sử dụng =chuỗi ký tự, đối tượng truyền, ràng buộc 2 cách.
3. Dữ liệu có thể được truyền dưới dạng một hàm theo &chuỗi, gọi hàm ngoài, có thể truyền dữ liệu từ lệnh tới bộ điều khiển.

Các tài liệu AngularJS trên chỉ là khá tốt bằng văn bản cho những gì những biểu tượng có ý nghĩa.

Để rõ ràng, bạn không thể có

scope: '@'

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

scope: {
    myProperty: '@'
}

Tôi thực sự khuyên bạn nê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 bị cô lập và các chủ đề khác.

Đây là một trích dẫn trực tiếp từ trang được liên kết ở trên, 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 giá trị giả:

• giả mạo : Không có phạm vi sẽ được tạo cho chỉ thị. Lệnh này sẽ sử dụng phạm vi của cha mẹ nó.

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

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

^{Đã truy xuất 2017/02/13 từ https://code.angularjs.org/1.4.11/docs/api/ng/service/ $ compile # -scope-, được cấp phép dưới dạng CC-by-SA 3.0}

Tôi gặp khó khăn khi liên kết một giá trị với bất kỳ ký hiệu nào trong AngularJS 1.6. Tôi hoàn toàn không nhận được bất kỳ giá trị nào undefined, mặc dù tôi đã làm nó giống hệt như các ràng buộc khác trong cùng một tệp đã hoạt động.

Vấn đề là: tên biến của tôi có dấu gạch dưới.

Điều này không thành công:

bindings: { import_nr: '='}

Những công việc này:

bindings: { importnr: '='}

(Không hoàn toàn liên quan đến câu hỏi ban đầu, nhưng đó là một trong những kết quả tìm kiếm hàng đầu khi tôi xem, vì vậy hy vọng điều này sẽ giúp được ai đó có cùng vấn đề.)