Angularjs自定义指令的创建

为什么使用 AngularJS 命令?

使用过 AngularJS 的人应该对它的命令最感兴趣。目前，只有 AngularJS 支持自定义命令，AngularJS 是唯一提供可重用 Java Web 框架。

目前，许多 JavaScript 产品都为 Web 开发人员提供了插件。例如，Bootstrap 是一个流行的前端开发工具包，它提供样式和 JavaScript 插件。在Booostrap 中使用boins 时，开发者必须切换到JavaScript 模式编写jQuery 代码来激活ins。jQuery代码虽然容易编写，但必须与HTML同步，这是一个繁琐且容易出错的过程。

AngularJS 主页显示了一个在 Bootstrap 中实现 Tab 功能的简单示例。可以很方便的在页面上添加Tab功能，使用就像ul标签一样简单。HTML 代码如下：

   BootStrap 选项卡组件           
          这是第一个选项卡的内容。              
          这是第二个选项卡的内容。     

JavaScript 代码如下：

angular.module('组件'，[])。指令（'tabs'，function（）{return {限制：'E'，transclude：true，范围：{}，控制器：[“$scope”，函数（$scope）{var panes = $scope.panes = [ ]; $scope.select = function(pane) { angular.forEach(panes, function(pane) { pane.selected = false; }); pane.selected = true; } this.addPane = function(pane) { if ( panes.length == 0) $scope.select(pane); panes.push(pane); } }]，模板：'' + '    
  '+'    
'+ '{{pane.title}}' + '
'+' 
' + '' + '', 替换: true }; }）。指令（'窗格'，函数（）{返回{要求：'^tabs'，限制：'E'，transclude：true，范围：{标题：'@'}，链接：函数（范围，元素，attrs，tabsCtrl ) { tabsCtrl.addPane(scope); }, 模板: '' + '', 替换: true }; })

如您所见，除了有 And Tag 之外，该页面与常规 HTML 页面没有什么不同。HTML 开发人员不需要编写任何代码。当然，吃螃蟹的第一人总是需要创建命令进行分享，但目前 Tabs 命令很常见，可以在任何地方复用(比如 BootStrap、jQueryUI、Wijmo，还有一些知名的前端插件)。

由于它的易用性和易写性，许多用户已经开始使用 AngularJS 编写命令。比如AngularJS开发团队已经实现了一系列命令——UI Bootstrap来替代基于AngularJS的Bootstrap;知名的ComponentOne控件厂商也基于AngularJS创建了Wijmo;我们还可以在 GitHub 上找到一些公共指令数据库：jQueryUI 小部件。

有了 AngularJS，你认为你已经站在了巨人的肩膀上吗?但不要高兴得太早。如果我们已经有这么多命令可以使用，我们为什么要学习 AngularJS，为什么要学习自定义命令?

比如你可能有特殊要求：如果你在财务公司工作，你需要创建一个财务表格，以表格的形式展示数据，具有绑定、编辑、校验、同步数据到服务器的功能. 表单插件很常见，但不清楚它们能否满足这些特定需求。因此，您必须根据您的实际业务需求创建自定义命令。

Offshore Investment Summary

这就是本文的目的。接下来我们将讨论如何创建 AngularJS 命令。

创建自定义 AngularJS 命令

本文开头的自定义命令非常简单。它只实现同步功能。通用命令包括更多元素：

// 创建命令模块（或检索现有模块） var m = angular. 模块（“我的应用程序”）；// 创建“my-dir”命令 myApp. directive ("myDir", function () {return {restrict: "E", // 指令是一个元素（不是属性） scope :{// 设置指令的作用域名称: "@", // name值传递（字符串，单向绑定）数量：“=”，//数量引用传递（双向绑定）保存：“&”//保存操作}，模板：//替换HTML（使用范围内的变量）“ " + "{name }}:"+"Save"+" ", Replace: true, // 使用模板替换原标签 transclude: false, // 不复制原HTML内容控制器: [" $ scope ", function ($ scope) {... }], Link: function (scope, element,

请注意，此自定义指令遵循格式：前缀“my”，类似于命名空间。因此，如果您在应用程序中引用多个模块命令，您可以轻松确定前缀的定义。这不是硬性要求，但可以带来很多便利。

该命令的构造函数返回带有属性的 JavaScript 对象。这些内容在 AngularJS 主页上都有清楚的描述。我对一些属性的理解如下：

Restrict：表示命令在 HTML 中的应用形式。备份选项包括“A”、“E”和“C”、“M”、属性、元素、类和注释(默认值：“”)。我们将更多地关注属性——如何创建 UI 元素。范围：创建指令的范围。范围作为指令中的属性标签传递。范围是创建可重用命令的必要条件。每个命令(无论嵌套命令的哪一层)都有一个唯一的作用域，并且不依赖于父作用域。范围对象定义名称和类型变量。前面的示例创建了三个范围变量。名称：“@”(传值，单向绑定)：

“@”表示变量是值传递。该命令检索从父范围传递的字符串中的值。命令可以使用该值但不能修改。它是最常见的变量。数量：“=”(引用，双向绑定)

“=”表示该变量是通过引用传递的。检索主范围中的参考值的命令。值可以是任何类型，包括复合对象和数组。该命令可以更改父 Scope 中的值。因此，当 Command 需要修改父 Scope 中的值时，需要该类型。保存：“&”(表达式)

'&' 符号表示该变量是在父 Scope 中启用的表达式。它允许命令执行比修改值更高级的操作。模板：替换原模板中标记的字符串。replace 函数用新值替换所有旧元素。请注意模板如何使用 Scope 中定义的变量。这允许您创建宏样式的命令，而无需编写任何额外的代码。Replace：表示是替换原标签中的值还是追加原标签中的值。默认值为假。保留原始标签。Transclude：表示自定义Command是否复制原始标签中的内容。例如，前面的“tab”命令将 transclude 设置为 true，因为 tab 元素包含其他 HTML 元素。“日期输入” 命令在初始化期间必须为空。因此，将 transclude 设置为 false。链接：此方法在命令中起着重要作用。它执行 DOM 操作并注册事件侦听器。链接方法包括以下参数： scope：Scope 命令的引用。范围变量在初始化期间未定义。链接方法注册监视值更改事件。元素：包含命令的 DOM 元素的引用。link 方法一般用于通过 jQuery 操作实例(如果不加载 jQuery 也可以使用 Angular 的 jqLit​​e)。控制器：与嵌套命令一起使用。

注意：调用link方法时，通过值(“@”)传递的作用域变量不会被初始化，会在指令生命周期的另一个时间点被初始化，如果需要监听这个事件，你可以使用范围。$ 观看方法。