真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關于我們
028-86922220

• 網(wǎng)站建設
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關于我們

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

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`' +
            '' +
          '' +
          '

正如你所見，除了擁有用于實現(xiàn)指令的 和 標簽，頁面和常規(guī)HTML頁面沒有什么區(qū)別。HTML開發(fā)人員無需編寫任何代碼。當然，總需要有第一個吃螃蟹的人，創(chuàng)建指令共享使用，但是目前Tabs指令已經(jīng)很常見了，可以在任何地方復用（如BootStrap,、jQueryUI、Wijmo, 和一些知名的前端插件集）。

由于指令的易用和易編寫，許多用戶已經(jīng)開始使用AngularJS編寫指令了。例如， AngularJS 開發(fā)組已經(jīng)基于AngularJS實現(xiàn)了一系列指令-UI Bootstrap 來代替Bootstrap； 知名ComponentOne 控件廠商也在AngularJS 基礎上創(chuàng)建了Wijmo ；我們也可以在GitHub上找到一些公共指令資料庫：jQueryUI widgets。

擁有了 AngularJS，是不是覺得自己已經(jīng)站在了巨人的肩膀上了？但是不要高興的太早，如果已經(jīng)有了這么多的指令供我們使用，那我們?yōu)槭裁催€要學習AngularJS ，為什么還要學習自定義指令呢？

舉個簡單的例子，也許你有特殊的需求：假設你在一家財務公司工作，你需要創(chuàng)建一張財務表單，它需要以表格的形式展示數(shù)據(jù)、擁有綁定、編輯、校驗并且同步數(shù)據(jù)更新到服務器的功能。表單插件很常見但是能夠滿足這些具體需求的不得而知了，所以你必須根據(jù)實際業(yè)務需求來創(chuàng)建自定義指令。

  
Offshore Investment Summary
  
  

這就是本篇文章的目的，接下來我們會討論如何創(chuàng)建 AngularJS指令。

創(chuàng)建自定義AngularJS 指令

文章開頭的自定義指令十分的簡單。它僅僅實現(xiàn)了同步的功能。一般指令是包含更多元素的：

//創(chuàng)建指令模塊 (或者檢索現(xiàn)有模塊)
var m = angular.module("myApp");
// 創(chuàng)建"my-dir"指令
myApp.directive("myDir", function() {
  return {
    restrict: "E",        // 指令是一個元素 (并非屬性)
    scope: {              // 設置指令對于的scope
      name: "@",          // name 值傳遞 （字符串，單向綁定）
      amount: "=",        // amount 引用傳遞（雙向綁定）
      save: "&"           // 保存操作
    },
    template:             // 替換HTML (使用scope中的變量)
      "
" +
      "  `name`: " +
      "  Save" +
      "
",
    replace: true,        // 使用模板替換原始標記
    transclude: false,    // 不復制原始HTML內(nèi)容
    controller: [ "$scope", function ($scope) { …  }],
    link: function (scope, element, attrs, controller) {…}
  }
});

效果如下：

注意這個自定義指令遵循一種格式：以"my" 為前綴，類似于命名空間，因此如果你在應用中引用了多個模塊指令，你可以通過前綴很容易的判斷出它是在哪定義的。這不是硬性要求，但是這樣做可以帶來很多便利。

指令的構造函數(shù)會返回帶有屬性的JavaScript 對象。這些內(nèi)容在AngularJS 主頁中都有清晰說明。以下是我對一些屬性的理解：

1. restrict: 說明指令在HTML中的應用形式，備選項有"A"、"E" 和 "C"， "M" ，分別代表 attribute、element、class和comment（默認值為"A"）。我們將更多的關注attributes-如何創(chuàng)建UI元素。

2. scope: 創(chuàng)建指令的作用范圍，scope在指令中作為屬性標簽傳遞。Scope 是創(chuàng)建可以復用指令的必要條件，每個指令（不論是處于嵌套指令的哪一級）都有其唯一的作用域，它不依賴于父scope。scope 對象定義names 和types 變量。上面的例子即創(chuàng)建了3個scope變量。

• name: "@" （值傳遞，單向綁定）： "@"符號表示變量是值傳遞。指令會檢索從父級scope中傳遞而來字符串中的值。指令可以使用該值但無法修改，是最常用的變量。

• amount: "=" （引用,雙向綁定）: "="符號表示變量是引用傳遞。指令檢索主Scope中的引用取值。值可以是任意類型的，包括復合對象和數(shù)組。指令可以更改父級Scope中的值，所以當指令需要修改父級Scope中的值時我們就需要使用這種類型。

• save: "&" (表達式) : “&”符號表示變量是在父級Scope中啟作用的表達式。它允許指令實現(xiàn)比修改值更高級的操作。

3. template: 替代原始模板中的標記的字符串。替換功能將替換所有舊元素為新值。注意template是如何使用Scope中定義的變量的。這允許你無需寫任何額外的代碼即可創(chuàng)建macro-style 風格指令。replace: 說明是否替換原始標記中的值或是追加原始標記中的值。默認值是false，這時原始標記將被保留。

4. transclude: 說明自定義指令是否復制原始標記中的內(nèi)容。例如，之前展示的“tab”指令設置了transclude 為 true，因為tab 元素包含其他HTML 元素。 "dateInput" 指令則需要在初始化時為空，所以需要設置transclude 為false。

5. link: 該方法在指令中扮演著重要的角色。它負責執(zhí)行DOM 操作和注冊事件監(jiān)聽器等。link 方法包含以下參數(shù)：

• scope: 指令Scope的引用。scope 變量在初始化時是不被定義的，link 方法會注冊監(jiān)視器監(jiān)視值變化事件。

• element: 包含指令的DOM元素的引用， link 方法一般通過jQuery 操作實例（如果沒有加載jQuery，還可以使用Angular's jqLite ）。

• controller: 在有嵌套指令的情況下使用。這個參數(shù)作用在于把子指令的引用提供給父指令，允許指令之間進行交互， tab 指令就是使用該參數(shù)較典型的例子：http://jsfiddle.net/powertoolsteam/GBE7N/1/

注意，當調(diào)用link 方法時， 通過值傳遞（"@"）的scope 變量將不會被初始化，它們將會在指令的生命周期中另一個時間點進行初始化，如果你需要監(jiān)聽這個事件，可以使用scope.$watch 方法。
好了，以上即為自定義指令需要用到基本知識描述。如果你仍然不熟悉指令，最好的方法就是動手實現(xiàn)幾個小例子，可以在fiddle中進行實踐：http://jsfiddle.net/powertoolsteam/Tk92U/

在下一篇文章中我們將一起熟悉幾個AngularJS自定義指令。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。