AngularJS Directive: Isolated Scope 和 attrs

在 AngularJS 中,指令(directive)是用于扩展 HTML 的标记。它们可以被用来创建自定义的元素、属性和类名,以及捆绑到特定的行为。AngularJS 框架提供了许多内置指令,同时也支持开发者通过编写自定义指令来实现更复杂的功能。

除了常见的 link 和 controller 函数之外,AngularJS 指令还可以通过 scope 属性来声明作用域。这个作用域可以分为三种类型:父级作用域、本地作用域和隔离作用域。其中,隔离作用域是一种最常用的作用域类型,它允许我们在指令中定义一个独立的作用域,从而避免与其他作用域发生冲突。

隔离作用域

隔离作用域是指令中最有用和最强大的特性之一。这种作用域允许你创建一个与外部作用域完全隔离的新作用域,从而使指令代码具有更高的可重用性和组合性。在 AngularJS 中,你可以使用 @,= 和 & 符号来声明隔离作用域的属性。

@

@ 符号用于将字符串值传递到隔离作用域中。它通常被用于传递简单的字符串、数字和布尔值。来看一个例子:

------------- ------------------- ----------------------
--------------------------------------------------- ---------- -
  ------ -
    ------ -
      ------------ ---
    --
    ----- --------------- -------- ------ -
      ------------------------------- -- -- ------ ------
    -
  --
---

=

= 符号用于建立一个双向绑定关系,从而使指令和父级作用域之间可以共享变量。当父级作用域中的值发生变化时,隔离作用域中的值也会随之更新。以下是一个例子:

---- -----------------------
  ------ ----------- -------------------
  ------------- --------------------------------------
------
----------------------------------------------- ---------------- -
  -------------- - ------ -------
---

--------------------------------------------------- ---------- -
  ------ -
    ------ -
      ------------ ---
    --
    ----- --------------- -------- ------ -
      ------------------------------- -- -- ------ ------
      ----------------- - -------- -- ------- -- ----------
    -
  --
---

&

& 符号用于在隔离作用域中执行一个函数。这个函数可以访问到父级作用域中的变量和函数。以下是一个例子:

---- -----------------------
  ------------- -------------------------------------------
------
----------------------------------------------- ---------------- -
  ----------------- - ---------- -
    ------------------ --------
  --
---

--------------------------------------------------- ---------- -
  ------ -
    ------ -
      ------------ ---
    --
    ----- --------------- -------- ------ -
      --------------------
    -
  --
---

attrs

除了隔离作用域,AngularJS 的指令还提供了 attrs 对象,用于获取当前元素上的属性值。这个对象包含了所有当前元素上定义的属性和它们的值。你可以在 link 函数中通过注入 attrs 参数来使用它:

------------------------

- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------