Dấu ngoặc đơn hàm javascript

Trước đó, tôi đã liệt kê từng thuộc tính có sẵn trên một phạm vi trong Angular và tôi đã sử dụng điều đó để giải thích cơ chế phân loại và cách hoạt động của phạm vi. Tôi sẽ làm tương tự với các chỉ thị, nhưng lần này tôi sẽ xem xét các thuộc tính của đối tượng được trả về bởi hàm xuất xưởng của một chỉ thị và cách mỗi thuộc tính đó ảnh hưởng đến chỉ thị mà chúng ta đang xác định

Điều đầu tiên cần lưu ý là tên của chỉ thị. Hãy xem xét một ví dụ ngắn gọn

angular.module('PonyDeli').directive('pieceOfFood', function () {
  var definition = { // <- these are the options we'll be discussing
    template: // ...
  };
  return definition;
});

Mặc dù trong đoạn mã trên, tôi đang xác định một lệnh có tên là

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

<span piece-of-food>span>

Theo mặc định, các lệnh chỉ có thể được kích hoạt dưới dạng thuộc tính, nhưng nếu bạn muốn thay đổi hành vi này thì sao?

1. Xác định cách một lệnh có thể được áp dụng trong đánh dấu

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    restrict: 'E',
    template: // ...
  };
});

Vì một số lý do mà tôi không thể hiểu được, bằng cách nào đó, họ đã quyết định làm xáo trộn khung dài dòng, và chúng tôi đã kết thúc bằng một chữ cái in hoa để xác định cách giới hạn một lệnh. Đây là danh sách

• angular.module('PonyDeli').directive('pieceOfFood', function () {
    return {
      template: '{{pieceOfFood}}',
      link: function (scope, element, attrs) {
        attrs.$observe('pieceOfFood', function (value) {
          scope.pieceOfFood = value;
        });
      }
    };
  });
  

  4 , các thuộc tính được cho phép,

  angular.module('PonyDeli').directive('pieceOfFood', function () {
    return {
      template: '{{pieceOfFood}}',
      link: function (scope, element, attrs) {
        attrs.$observe('pieceOfFood', function (value) {
          scope.pieceOfFood = value;
        });
      }
    };
  });
  

  5

• angular.module('PonyDeli').directive('pieceOfFood', function () {
    return {
      template: '{{pieceOfFood}}',
      link: function (scope, element, attrs) {
        attrs.$observe('pieceOfFood', function (value) {
          scope.pieceOfFood = value;
        });
      }
    };
  });
  

  6 Các yếu tố được cho phép,

  angular.module('PonyDeli').directive('pieceOfFood', function () {
    return {
      template: '{{pieceOfFood}}',
      link: function (scope, element, attrs) {
        attrs.$observe('pieceOfFood', function (value) {
          scope.pieceOfFood = value;
        });
      }
    };
  });
  

  7

• angular.module('PonyDeli').directive('pieceOfFood', function () {
    return {
      template: '{{pieceOfFood}}',
      link: function (scope, element, attrs) {
        attrs.$observe('pieceOfFood', function (value) {
          scope.pieceOfFood = value;
        });
      }
    };
  });
  

  8 Như một tên lớp,

  angular.module('PonyDeli').directive('pieceOfFood', function () {
    return {
      template: '{{pieceOfFood}}',
      link: function (scope, element, attrs) {
        attrs.$observe('pieceOfFood', function (value) {
          scope.pieceOfFood = value;
        });
      }
    };
  });
  

  9

• angular.module('PonyDeli').directive('pieceOfFood', function () {
    return {
      restrict: 'E',
      template: // ...
    };
  });
  

  30 Như một nhận xét,

  angular.module('PonyDeli').directive('pieceOfFood', function () {
    return {
      restrict: 'E',
      template: // ...
    };
  });
  

  31

• angular.module('PonyDeli').directive('pieceOfFood', function () {
    return {
      restrict: 'E',
      template: // ...
    };
  });
  

  32 Bạn có thể kết hợp bất kỳ thứ nào trong số này để nới lỏng hạn chế một chút

Đừng bao giờ sử dụng

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    restrict: 'E',
    template: // ...
  };
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    restrict: 'E',
    template: // ...
  };
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    restrict: 'E',
    template: // ...
  };
});

Bạn có nhớ lần trước tôi đã nói hãy nghe lời khuyên với một nhúm muối không?

Thật không may, phần còn lại của các thuộc tính trong một đối tượng định nghĩa chỉ thị khó hiểu hơn nhiều

1. Đặt cách một lệnh tương tác với phạm vi

   angular.module('PonyDeli').directive('pieceOfFood', function () {
     var definition = { // <- these are the options we'll be discussing
       template: // ...
     };
     return definition;
   });
   

   20

Vì chúng ta đã thảo luận chi tiết về phạm vi trong phần trước, nên việc học cách sử dụng thuộc tính

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    restrict: 'E',
    template: // ...
  };
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  var definition = { // <- these are the options we'll be discussing
    template: // ...
  };
  return definition;
});

Để nguyên chuỗi phạm vi rõ ràng là hữu ích khi chỉ thị của bạn hoàn toàn không tương tác với phạm vi, nhưng điều đó hiếm khi xảy ra. Một tình huống phổ biến hơn nhiều khi không chạm vào phạm vi là hữu ích, đó là khi tạo một lệnh không có lý do gì để được thực hiện nhiều lần trên bất kỳ phạm vi cụ thể nào và chỉ tương tác với một thuộc tính phạm vi duy nhất, tên lệnh. Điều này mang tính khai báo nhất khi được kết hợp với

angular.module('PonyDeli').directive('pieceOfFood', function () {
  var definition = { // <- these are the options we'll be discussing
    template: // ...
  };
  return definition;
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    restrict: 'E',
    template: // ...
  };
});

Lấy bút. Có một vài điều cần lưu ý ở đây, mà chúng ta chưa thảo luận. Bạn sẽ tìm hiểu thêm về tài sản

angular.module('PonyDeli').directive('pieceOfFood', function () {
  var definition = { // <- these are the options we'll be discussing
    template: // ...
  };
  return definition;
});

Trong chức năng liên kết chỉ thị, chúng ta có thể truy cập

angular.module('PonyDeli').directive('pieceOfFood', function () {
  var definition = { // <- these are the options we'll be discussing
    template: // ...
  };
  return definition;
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  var definition = { // <- these are the options we'll be discussing
    template: // ...
  };
  return definition;
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  var definition = { // <- these are the options we'll be discussing
    template: // ...
  };
  return definition;
});

Chúng ta có thể thay đổi mã ở trên, làm cho nó hữu ích hơn nhiều, bằng cách thêm

angular.module('PonyDeli').directive('pieceOfFood', function () {
  var definition = { // <- these are the options we'll be discussing
    template: // ...
  };
  return definition;
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  var definition = { // <- these are the options we'll be discussing
    template: // ...
  };
  return definition;
});

Trong trường hợp này, tôi đang đánh giá giá trị thuộc tính,

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

Bạn có thể giải quyết vấn đề đó bằng cách tạo một phạm vi con, kế thừa nguyên mẫu từ cha của nó. Để tạo phạm vi con, bạn chỉ cần khai báo

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

<span piece-of-food>span>

<span piece-of-food>span>

Như bạn có thể thấy, giờ đây chúng ta có thể sử dụng nhiều phiên bản của lệnh và nhận được hành vi mong muốn, bởi vì mỗi lệnh đang tạo phạm vi riêng của nó. Tuy nhiên, có một hạn chế. nhiều chỉ thị trên một phần tử đều có cùng phạm vi

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ỉ một phạm vi mới được tạo

Phạm vi cô đơn, biệt lập

Một tùy chọn cuối cùng là tạo phạm vi cục bộ hoặc cô lập. Sự khác biệt giữa phạm vi cô lập và phạm vi con là phạm vi cục bộ không kế thừa từ cha mẹ của chúng (nhưng nó vẫn có thể truy cập được trên

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

Bạn có thể bỏ qua tên thuộc tính nếu bạn định sử dụng tên đó làm khóa trong phạm vi cục bộ của mình. Điều đó có nghĩa là,

<span piece-of-food>span>

Chọn vũ khí của bạn. angular.module('PonyDeli').directive('pieceOfFood', function () { return { template: '{{pieceOfFood}}', link: function (scope, element, attrs) { attrs.$observe('pieceOfFood', function (value) { scope.pieceOfFood = value; }); } }; }); 58, angular.module('PonyDeli').directive('pieceOfFood', function () { return { template: '{{pieceOfFood}}', link: function (scope, element, attrs) { attrs.$observe('pieceOfFood', function (value) { scope.pieceOfFood = value; }); } }; }); 57 hay angular.module('PonyDeli').directive('pieceOfFood', function () { return { template: '{{pieceOfFood}}', link: function (scope, element, attrs) { attrs.$observe('pieceOfFood', function (value) { scope.pieceOfFood = value; }); } }; }); 59?

Vậy những biểu tượng đó có ý nghĩa gì?

Người quan sát thuộc tính,

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

58

Sử dụng

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

<span piece-of-food>span>

Điều này là dành cho những thay đổi và cập nhật phạm vi địa phương của chúng tôi. Tất nhiên, sử dụng ký hiệu

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

<span piece-of-food>span>

Trình quan sát thuộc tính hữu ích nhất khi sử dụng các tùy chọn cho một lệnh. Tuy nhiên, nếu chúng ta muốn thay đổi hành vi của lệnh dựa trên việc thay đổi các tùy chọn, thì sẽ hợp lý hơn nếu chúng ta tự viết dòng

<span piece-of-food>span>

Trong những trường hợp đó, chỉ cần thay thế

<span piece-of-food>span>

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    restrict: 'E',
    template: // ...
  };
});

<span piece-of-food>span>

Điều quan trọng cần lưu ý là, khi xử lý

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

58, chúng ta đang nói về việc quan sát và thuộc tính, thay vì ràng buộc với phạm vi gốc

Trình tạo biểu thức,

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

57

Sử dụng

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

<span piece-of-food>span>

<span piece-of-food>span>

Dưới đây tôi đã phác thảo cách bạn có thể triển khai chức năng tương tự bên trong chức năng liên kết, nếu bạn không biết về

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

<span piece-of-food>span>

Trình tạo biểu thức, như chúng ta có thể thấy, tạo ra một phương thức truy vấn phạm vi cha. Bạn có thể thực thi phương thức bất cứ khi nào bạn muốn và thậm chí xem nó để thay đổi đầu ra. Phương pháp này nên được coi là truy vấn chỉ đọc trên biểu thức gốc và như vậy sẽ hữu ích nhất trong hai trường hợp. Đầu tiên là nếu bạn cần theo dõi các thay đổi trên phạm vi cha, trong trường hợp đó, bạn sẽ thiết lập theo dõi trên biểu thức hàm,

<span piece-of-food>span>

Một tình huống khác mà điều này có thể hữu ích là khi bạn cần truy cập vào một phương thức trên phạm vi cha. Giả sử phạm vi cha có phương thức làm mới bảng, trong khi phạm vi cục bộ của bạn đại diện cho một hàng của bảng. Khi hàng của bảng bị xóa, bạn có thể muốn làm mới bảng. Nếu nút nằm trong phạm vi con, thì sẽ hợp lý khi sử dụng liên kết

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

Liên kết hai chiều,

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

59

Sử dụng

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

<span piece-of-food>span>

<span piece-of-food>span>

Liên kết hai chiều hơn

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

<span piece-of-food>span>

Hình thức liên kết dữ liệu này được cho là hữu ích nhất trong cả ba. Trong trường hợp này, thuộc tính phạm vi cha được giữ đồng bộ với phạm vi cục bộ. Bất cứ khi nào giá trị phạm vi cục bộ được cập nhật, nó sẽ được đặt trên phạm vi chính. Tương tự như vậy, bất cứ khi nào giá trị phạm vi cha thay đổi, phạm vi cục bộ sẽ được cập nhật. Kịch bản đơn giản nhất mà tôi dành cho bạn khi điều này có thể hữu ích, đó là bất cứ khi nào bạn có một phạm vi con được sử dụng để biểu diễn một mô hình con của phạm vi cha. Hãy nghĩ về bảng CRUD (Tạo, Đọc, Cập nhật, Xóa) điển hình của bạn. Toàn bộ bảng sẽ là phạm vi cha, trong khi mỗi hàng sẽ được chứa trong một lệnh cô lập, liên kết với mô hình dữ liệu của hàng thông qua liên kết

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

Điều đó tốn nhiều từ, nhưng tôi nghĩ mình đã tóm tắt được cách thức hoạt động của thuộc tính

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    restrict: 'E',
    template: // ...
  };
});

Chỉ thị có hiệu quả nhất khi chúng chứa các đoạn mã HTML nhỏ, có thể tái sử dụng. Đó là nơi sức mạnh thực sự của các chỉ thị đến từ. Các mẫu này có thể được cung cấp ở dạng văn bản thuần túy hoặc dưới dạng tài nguyên mà Angular sẽ truy vấn khi khởi động lệnh

1. Là cách bạn sẽ cung cấp mẫu xem dưới dạng văn bản thuần túy.

   angular.module('PonyDeli').directive('pieceOfFood', function () {
     return {
       template: '{{pieceOfFood}}',
       link: function (scope, element, attrs) {
         attrs.$observe('pieceOfFood', function (value) {
           scope.pieceOfFood = value;
         });
       }
     };
   });
   

   56
2. Cho phép bạn cung cấp url cho một mẫu HTML.

   angular.module('PonyDeli').directive('pieceOfFood', function () {
     return {
       template: '{{pieceOfFood}}',
       link: function (scope, element, attrs) {
         attrs.$observe('pieceOfFood', function (value) {
           scope.pieceOfFood = value;
         });
       }
     };
   });
   

   58

Sử dụng

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

<span piece-of-food>span>

Bạn cũng có thể cung cấp một

<span piece-of-food>span>

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    template: '{{pieceOfFood}}',
    link: function (scope, element, attrs) {
      attrs.$observe('pieceOfFood', function (value) {
        scope.pieceOfFood = value;
      });
    }
  };
});

1. <span piece-of-food>span>
   

   03 Mẫu có nên được chèn dưới dạng phần tử con hoặc được đặt trong dòng không?

Tài liệu về tài sản này rất khó hiểu

<span piece-of-food>span>

03

Chỉ định nơi mẫu sẽ được chèn. Mặc định là

<span piece-of-food>span>

05

• <span piece-of-food>span>
  

  06 Mẫu sẽ thay thế phần tử hiện tại

• <span piece-of-food>span>
  

  05 Mẫu sẽ thay thế nội dung của phần tử hiện tại

Vì vậy, khi thay thế là

<span piece-of-food>span>

<span piece-of-food>span>

<span piece-of-food>span>

Theo nguyên tắc chung, hãy thử và giữ thay thế ở mức tối thiểu. Tất nhiên, các chỉ thị nên cố gắng giữ cho sự can thiệp vào DOM càng gần càng tốt, bất cứ khi nào có thể

Các chỉ thị được biên dịch, dẫn đến chức năng liên kết trước và chức năng liên kết sau. Bạn có thể xác định mã trả về các hàm này hoặc chỉ cung cấp chúng. Dưới đây là những cách khác nhau mà bạn có thể cung cấp các chức năng liên kết. Tôi cảnh báo bạn, đây là một trong những “tính năng” khác trong Angular mà tôi cảm thấy có nhiều nhược điểm hơn, bởi vì nó khiến những người mới đến bối rối mà chẳng thu được gì. Hãy chứng kiến

<span piece-of-food>span>

<span piece-of-food>span>

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    restrict: 'E',
    template: // ...
  };
});

Trên thực tế, bạn thậm chí có thể quên đối tượng định nghĩa chỉ thị mà chúng ta đã thảo luận cho đến nay và chỉ trả về một hàm sau liên kết. Tuy nhiên, điều này không được khuyến nghị ngay cả bởi những người nhìn trộm góc cạnh, vì vậy tốt hơn hết bạn nên tránh xa nó

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    restrict: 'E',
    template: // ...
  };
});

Trước khi tiếp tục, đây là một lưu ý quan trọng từ tài liệu Angular mà tôi muốn bạn xem qua

Ghi chú. Phiên bản mẫu và phiên bản liên kết có thể là các đối tượng khác nhau nếu mẫu đã được sao chép. Vì lý do này, không an toàn khi thực hiện bất kỳ điều gì khác ngoài các phép biến đổi DOM áp dụng cho tất cả các nút DOM được nhân bản trong hàm biên dịch. Cụ thể, đăng ký trình nghe DOM nên được thực hiện trong chức năng liên kết thay vì trong chức năng biên dịch

Các hàm biên dịch hiện có tham số thứ ba, một hàm liên kết nhúng, nhưng nó không được dùng nữa. Ngoài ra, bạn không nên thay đổi DOM trong các chức năng biên dịch (trên

<span piece-of-food>span>

<span piece-of-food>span>

angular.module('PonyDeli').directive('pieceOfFood', function () {
  var definition = { // <- these are the options we'll be discussing
    template: // ...
  };
  return definition;
});

Tôi có một quy tắc cho bạn ở đây. Luôn sử dụng chức năng post-linking. Nếu một phạm vi hoàn toàn cần phải được điền sẵn trước khi DOM được liên kết, thì hãy thực hiện điều đó trong hàm tiền liên kết, nhưng liên kết chức năng trong hàm sau liên kết, như bạn thường làm. Bạn sẽ hiếm khi cần phải làm điều này, nhưng tôi nghĩ nó vẫn đáng được đề cập

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    restrict: 'E',
    template: // ...
  };
});

1. Một thể hiện của bộ điều khiển trên chỉ thị

Các chỉ thị có thể có các bộ điều khiển, điều này hợp lý, bởi vì các chỉ thị có thể tạo ra một phạm vi. Bộ điều khiển được chia sẻ giữa tất cả các lệnh trên phạm vi và nó có thể truy cập được dưới dạng đối số thứ tư trong các chức năng liên kết. Các bộ điều khiển này là một kênh liên lạc hữu ích giữa các lệnh ở cùng cấp độ phạm vi, có thể được chứa trong chính lệnh đó

1. Bí danh bộ điều khiển để tham chiếu nó trong mẫu

Sử dụng bí danh bộ điều khiển cho phép sử dụng bộ điều khiển trong chính mẫu, vì nó sẽ được cung cấp trong phạm vi

1. Tôi sẽ ném nếu bạn không liên kết một số (các) chỉ thị khác trên phần tử này

Tài liệu về yêu cầu đơn giản một cách đáng ngạc nhiên, vì vậy tôi sẽ gian lận và dán nó vào đây

Yêu cầu một lệnh khác và thêm bộ điều khiển của nó làm đối số thứ tư cho chức năng liên kết.

<span piece-of-food>span>

16 lấy tên chuỗi (hoặc mảng chuỗi) của (các) lệnh để truyền vào. Nếu một mảng được sử dụng, đối số được đưa vào sẽ là một mảng theo thứ tự tương ứng. Nếu không tìm thấy lệnh như vậy hoặc nếu lệnh không có bộ điều khiển, thì sẽ xảy ra lỗi. Tên có thể được thêm tiền tố với

• <span piece-of-food>span>
  

  18 Xác định vị trí bộ điều khiển cần thiết trên phần tử hiện tại. Ném lỗi nếu không tìm thấy

• <span piece-of-food>span>
  

  19 Cố gắng xác định vị trí bộ điều khiển được yêu cầu hoặc chuyển

  <span piece-of-food>span>
  

  20 đến

  angular.module('PonyDeli').directive('pieceOfFood', function () {
    var definition = { // <- these are the options we'll be discussing
      template: // ...
    };
    return definition;
  });
  

  25 fn nếu không tìm thấy

• <span piece-of-food>span>
  

  22 Xác định vị trí bộ điều khiển được yêu cầu bằng cách tìm kiếm cha mẹ của phần tử. Ném lỗi nếu không tìm thấy

• <span piece-of-food>span>
  

  23 Cố gắng xác định vị trí bộ điều khiển được yêu cầu bằng cách tìm kiếm cha mẹ của phần tử hoặc chuyển

  <span piece-of-food>span>
  

  20 đến

  angular.module('PonyDeli').directive('pieceOfFood', function () {
    var definition = { // <- these are the options we'll be discussing
      template: // ...
    };
    return definition;
  });
  

  25 fn nếu không tìm thấy

1. Xác định thứ tự áp dụng các chỉ thị

thời gian gian lận

Khi có nhiều lệnh được xác định trên một phần tử DOM, đôi khi cần chỉ định thứ tự áp dụng các lệnh đó.

<span piece-of-food>span>

26 được sử dụng để sắp xếp các lệnh trước khi hàm

<span piece-of-food>span>

12 của chúng được gọi. Ưu tiên được định nghĩa là một số. Các chỉ thị có số lớn hơn

<span piece-of-food>span>

26 được biên dịch trước. Các chức năng trước liên kết cũng được chạy theo thứ tự ưu tiên, nhưng các chức năng sau liên kết được chạy theo thứ tự ngược lại. Thứ tự của các lệnh có cùng mức độ ưu tiên không được xác định. Ưu tiên mặc định là

<span piece-of-food>span>

30

1. Ngăn chặn việc xử lý thêm các chỉ thị

Nếu được đặt thành true thì

<span piece-of-food>span>

26 hiện tại sẽ là tập lệnh cuối cùng sẽ thực thi (bất kỳ lệnh nào ở mức ưu tiên hiện tại sẽ vẫn thực thi vì thứ tự thực hiện trên cùng một

<span piece-of-food>span>

26 không được xác định)

1. Biên dịch nội dung của phần tử và cung cấp nội dung đó cho chỉ thị

Tôi đã để dành thứ tốt nhất (tệ nhất?) cho lần cuối. Thuộc tính này cho phép hai giá trị, để vui hơn và ít lợi nhuận hơn. Bạn có thể đặt nó thành

<span piece-of-food>span>

<span piece-of-food>span>

Ở cấp độ cao, loại trừ cho phép người tiêu dùng của một lệnh xác định một đoạn mã HTML mà sau đó có thể được đưa vào một số phần của lệnh đó, sử dụng lệnh

<span piece-of-food>span>

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    restrict: 'E',
    template: // ...
  };
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    restrict: 'E',
    template: // ...
  };
});

Tất nhiên, bạn có thể kiểm tra nó trên CodePen. Điều gì xảy ra khi bạn cố gắng đưa phạm vi vào hỗn hợp? . Đây là những gì bạn mong đợi, bởi vì nội dung được nhúng được xác định trong mã tiêu thụ, thuộc về phạm vi chính chứ không phải phạm vi của lệnh. Lệnh vẫn liên kết với phạm vi cục bộ của nó, như thường lệ

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    restrict: 'E',
    template: // ...
  };
});

angular.module('PonyDeli').directive('pieceOfFood', function () {
  return {
    restrict: 'E',
    template: // ...
  };
});

Bạn cũng có thể tìm thấy cái đó trên CodePen. Ở đó bạn có nó, loại trừ, làm sáng tỏ

Đọc thêm

Đây là một số tài nguyên bổ sung mà bạn có thể đọc để mở rộng hơn nữa sự hiểu biết của mình về Angular

• Giá đỡ góc (Phần I), Ống ngắm súng trường
• Làm cách nào để chọn giữa không có phạm vi mới, phạm vi con hoặc phạm vi cô lập?
• Khái niệm cơ bản về loại trừ (chụp màn hình)

• <span piece-of-food>span>
  

  38 so với

  <span piece-of-food>span>
  

  39
• Hiểu Chỉ thị,

  <span piece-of-food>span>
  

  40 và

  <span piece-of-food>span>
  

  12

Vui lòng bình luận về bất kỳ vấn đề nào liên quan đến bài viết này, để mọi người có thể hưởng lợi từ phản hồi của bạn. Ngoài ra, bạn nên theo dõi tôi trên Twitter