AngularJS 是一个十分强大的前端框架，其中的指令是让它变得更为灵活的核心组件之一。指令可以拓展 AngularJS 并将它与 DOM 元素绑定起来，使开发者能够创造出自定义的 HTML 标记，以及享受到更多的可拓展性和可维护性。
那么，在实现 AngularJS 指令的过程中，究竟需要怎样做呢？
指令的定义
在 AngularJS 中，指令可以通过一个对象进行定义。下面是一个基本的指令定义示例：
-- -------------------- ---- ------- --- ----- - ----------------------- ---- ------------------------------ ---------- - ------ - --------- ---- -------- ----- --------- ------------ ------------- -- ---展开代码
AngularJS 框架通过一个名为directive的方法来定义指令。在上述示例中，我们已经创建了一个名为myDirective的指令。通过定义restrict选项为 'E'，指令的作用范围被限制为 HTML 标签字符串。选择器可以通过其他方式来定义，例如 "A" 可以定义为属性选择器，"C" 可以定义为类选择器。
关于指令的渲染方式，我们通常可以通过$scope对象来表示当前作用域中的模型。这样我们才能在模板中进行数据的绑定。
指令的使用
在实际使用指令时，我们可以像使用任何其他标记一样在 HTML 文档中使用它们。如下所示：
<my-directive></my-directive>在页面中引入指令后，AngularJS 会将其编译并转换为 HTML 元素。在本例中，指令将被替换成<div>Hello, world!</div>，这意味着最终的 HTML 片段将变成这样：
<div>Hello, world!</div>
指令的选项
AngularJS 定义了多种指令选项，其中某些选项是必须设置的，而其他选项则是可选的。
restrict (必需)
restrict选项用来指定指令可使用的元素和属性类型。该选项可以为以下几个值：
'A': 根据属性名称匹配'E': 匹配元素名称'C': 匹配类名称
对于这个选项的使用，我们可以通过按如下方式定义：
return { restrict: 'EAC', // ... };
在这个示例中，我们定义了指令可以匹配元素、属性和类名称。换言之，这样指令可以作为任何一种属性类型出现。
template 和 templateUrl (必需)
template和templateUrl选项之一必须被指定。通过它们，指令的模板将被解析为 HTML 元素并嵌入到页面中。如果我们要手动定义指令的 HTML 元素，我们就应该使用template选项。如果我们的 HTML 太大或太复杂，我们应该使用templateUrl选项，来指定一个文件的路径，好让 AngularJS 加载它。
return { template: '<div>{{ myValue }}</div>', templateUrl: 'myDirectiveTemplate.html', // ... };
在这个示例中，我们看到了如何在指令中绑定myValue到一个 HTML 元素上。该值可以在指令所在的作用域中设置。如果想要将模板放在单独的文件中，在这个文件中声明模板，然后将其通过templateUrl选项引入即可。
scope (可选)
通过定义scope选项，我们可以在指令的作用域中定义新的属性，默认情况下使用父作用域。这样可以帮助我们尽量减少作用域之间的耦合。这通常用于创建可重用的组件。在下面的示例中，我们看到了如何使用scope选项来为指令添加属性：
return { scope: { myValue: '@' }, template: '<div>{{ myValue }}</div>', // ... };
在这个示例中，我们定义了一个名为myValue的属性，它指定了属性名称以及其如何影响模板。在模板中，我们将 myValue 作为绑定属性传递，即使用{{ myValue }}放置在一个 HTML 元素中。
link (可选)
最后一个值得一提的选项是link选项。它是一个函数，这个函数在指令编译和链接过程中被执行，从而允许开发者在这些过程中添加自定义行为。
return { link: function(scope, element, attributes) { // Do something here }, // ... };
在这个示例中，我们定义了一个带有link函数的指令。在指令被编译和链接之前，该函数会被执行。在函数中，我们可以使用scope对象来引用当前指令作用域中的属性。参数element指向了当前指令所在的元素。在该元素上，我们可以使用 jQuery 或其他库来查找它的子元素或设置样式。attributes参数是元素所有的属性列表，在它上面我们可以添加自定义属性。
进一步探讨
在本篇文章中，我们简单介绍了 AngularJS 指令的一些基础用法，包括指令的定义、使用及选项等内容。然而，AngularJS 框架的指令是非常强大、灵活且复杂的。在使用指令的过程中，开发者需要结合具体业务场景加以探讨和创新。
最后，我们以 Angular 官网的 example 为例，看一下使用指令的全过程：
HTML 模板，
<my-directive> <my-sub-directive attr="value"> <my-sub-sub-directive></my-sub-sub-directive> </my-sub-directive> </my-directive>
指令定义：
-- -------------------- ---- ------- ------------------------------ ---------- - ------ - --------- ---- ----------- ----- ------ --- ------------ ------------------ -- --- --------------------------------- ---------- - ------ - --------- ---- ----------- ----- ------ --- ------------ --------------------- -- --- ------------------------------------ ---------- - ------ - --------- ---- ----------- ----- ------ --- ------------ ------------------------ -- ---展开代码
模板文件，
-- -------------------- ---- ------- ---- ---------------- --- ----- ------ -------------- ---- -------------------- ------ ---- ------------------- --- ----- ------ --- -------------- --------------------------------------------- ---- -------------------- ------ ---- ---------------------- --- ----- ------ --- --- -------------- ---- -- --- ------- -- -- ----------------- ------展开代码
结果，
-- -------------------- ---- ------- ----- ------ -------------- ----- ------ --- -------------- ----- ------ --- --- -------------- ---- -- --- ------- -- -- ----------------- ------ ----- ------- ------- ---- -------- ------ ------ ------展开代码
通过这个示例，我们可以看到指令是如何相互嵌套的，也可以看到指令的传递和继承。祝各位开发者对 AngularJS 指令有更加深入的认识和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c7b9cacc0f7239cdf9a67e
