Một số ví dụ đơn giản về new isolate/isolated scope (scope: {…}) của directive trong AngularJS

Một trong những khó khăn cho những ai mới làm quen với AngularJS đó là vấn đề sử dụng new isolate/isolated scope (scope: {…}) của directive. Đối với vấn đề sử dụng loại {scope: true} hoặc {scope: false}, các bạn có thể đọc bài sau để hiểu rõ hơn:

Understanding Scopes in Angularjs

Bài viết này mình sẽ đề cập 3 loại scope sau:

  1. interpolated scope (@)
  2. two-way binding scope (=)
  3. expression binding scope (&)

Mình hi vọng một số ví dụ đơn giản trong bài viết dưới đây sẽ giúp các bạn tiếp cận dễ dàng và nhanh chóng.

1. Interpolated Scope (@):

Hay còn gọi là one-way binding scope. Để sử dụng loại scope này, tham số được gán vào thuộc tính chứa trong directive là giá trị cụ thể.

Giả sử mình có directive là scopeInterpolated và scope của directive:

được hiểu là interpolatedPropInDirective có giá trị của interpolatedPropInCtrl chứa trong controller phía bên ngoài.

Nếu bạn ko để dấu ngoặc {{ .. }} thì interpolatedPropInDirective có giá trị là chuỗi “interpolatedPropInCtrl”.

Khi sử dụng loại scope này, việc thay đổi giá trị trong scope của directive không làm thay đổi giá trị trong scope của controller phía bên ngoài.

 

2. Two-way Binding Scope (=):

Khác với one-way binding scope, để sử dụng loại scope này, tham số được gán vào thuộc tính chứa trong directive là property thuộc scope chứa trong contoller bọc ngoài.

Giả sử mình có directive là scopeTwowaybinding và scope của directive:

được hiểu là twowaybindingPrimitivePropInDirective,  twowaybindingObjPropInDirective có giá trị tương ứng của twowaybindingPrimitivePropInCtrl, twowaybindingObjPropInCtrl chứa trong controller phía bên ngoài.

Khi sử dụng loại scope này, việc thay đổi giá trị trong scope của directive cũng sẽ làm thay đổi giá trị trong scope của controller phía bên ngoài, chính vì vậy nó được gọi là “two-way binding”.

 

3. Expression Binding Scope (&):

Không có điểm tương đồng từ 2 loại scope trên, scope này thường được dùng để sử dụng lại một hàm trong controller phía bên ngoài.

Giả sử mình có directive là scopeExpressionbinding và scope của directive:

được hiểu là expressionPropInDirective như một hàm expressionPropInCtrl chứa trong controller phía bên ngoài. Đối với hàm có tham số truyền vào, để dùng được hàm, khi gọi phải chỉ định tên tham số cụ thể giống như đã được khai báo trong directive, cụ thể là 2 tham số param1param2:

 

Sample Code: 

https://plnkr.co/edit/Ys2W82r2k707Q9PE396Q

 

Trên đây là bài viết được tích lũy từ kinh nghiệm của mình, nếu có gì sai sót, mong mọi người thông cảm và góp ý.

407 total views, 1 views today

Trả lời