带你走近AngularJS-创建自定义指令-创新互联

带你走近AngularJS系列：

成都创新互联长期为超过千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为义县企业提供专业的成都网站设计、做网站，义县网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

带你走近AngularJS - 基本功能介绍
带你走近AngularJS - 体验指令实例
带你走近AngularJS - 创建自定义指令

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

为什么使用AngularJS 指令？

使用过 AngularJS 的朋友应该最感兴趣的是它的指令。现今市场上的前端框架也只有AngularJS 拥有自定义指令的功能，并且AngularJS 是目前唯一提供Web应用可复用能力的框架。

目前有很多JavaScript 产品提供插件给Web开发人员。例如， Bootstrap 就是当前比较流行的提供样式和JavaScript插件的前端开发工具包。但是开发人员在使用Booostrap中的插件时，必须切换到JavaScript 模式来写 jQuery 代码来激活插件虽然 jQuery 代码写起来十分简单，但是必须和HTML进行同步，这是一个单调乏味且容易出错的过程。

AngularJS主页展示了一个简单的例子，用于实现Bootstrap中的 Tab功能，可以在页面中轻松添加 Tab 功能，并且使用方法和 ul 标签一样简单。HTML代码如下：


  BootStrap Tab Component
  
    
      This is the content of the first tab.
    
    
      This is the content of the second tab.

JavaScript代码如下：

angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: [ "$scope", function($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);
        }
      }],
      template:
        '' +
          '' +
            ''+
              '`pane`.`title`' +
            '' +
          '' +
          '

' + '

', replace: true }; }). directive('pane', function() { return { require: '^tabs', restrict: 'E', transclude: true, scope: { title: '@' }, link: function(scope, element, attrs, tabsCtrl) { tabsCtrl.addPane(scope); }, template: '' + '

正如你所见，除了拥有用于实现指令的和标签，页面和常规HTML页面没有什么区别。HTML开发人员无需编写任何代码。当然，总需要有第一个吃螃蟹的人，创建指令共享使用，但是目前Tabs指令已经很常见了，可以在任何地方复用（如BootStrap,、jQueryUI、Wijmo, 和一些知名的前端插件集）。

由于指令的易用和易编写，许多用户已经开始使用AngularJS编写指令了。例如， AngularJS 开发组已经基于AngularJS实现了一系列指令-UI Bootstrap 来代替Bootstrap；知名ComponentOne 控件厂商也在AngularJS 基础上创建了Wijmo ；我们也可以在GitHub上找到一些公共指令资料库：jQueryUI widgets。

拥有了 AngularJS，是不是觉得自己已经站在了巨人的肩膀上了？但是不要高兴的太早，如果已经有了这么多的指令供我们使用，那我们为什么还要学习AngularJS ，为什么还要学习自定义指令呢？

举个简单的例子，也许你有特殊的需求：假设你在一家财务公司工作，你需要创建一张财务表单，它需要以表格的形式展示数据、拥有绑定、编辑、校验并且同步数据更新到服务器的功能。表单插件很常见但是能够满足这些具体需求的不得而知了，所以你必须根据实际业务需求来创建自定义指令。

这就是本篇文章的目的，接下来我们会讨论如何创建 AngularJS指令。

创建自定义AngularJS 指令

文章开头的自定义指令十分的简单。它仅仅实现了同步的功能。一般指令是包含更多元素的：

注意这个自定义指令遵循一种格式：以"my" 为前缀，类似于命名空间，因此如果你在应用中引用了多个模块指令，你可以通过前缀很容易的判断出它是在哪定义的。这不是硬性要求，但是这样做可以带来很多便利。

指令的构造函数会返回带有属性的JavaScript 对象。这些内容在AngularJS 主页中都有清晰说明。以下是我对一些属性的理解：

注意，当调用link 方法时，通过值传递（"@"）的scope 变量将不会被初始化，它们将会在指令的生命周期中另一个时间点进行初始化，如果你需要监听这个事件，可以使用scope.$watch 方法。
好了，以上即为自定义指令需要用到基本知识描述。如果你仍然不熟悉指令，最好的方法就是动手实现几个小例子，可以在fiddle中进行实践：http://jsfiddle.net/powertoolsteam/Tk92U/

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

重庆分公司，新征程启航

带你走近AngularJS-创建自定义指令-创新互联

BootStrap Tab Component

Offshore Investment Summary

创建自定义AngularJS 指令

其他资讯