成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

自定義指令實(shí)現(xiàn)手風(fēng)琴菜單 AngularJS

RyanHoo / 1484人閱讀

摘要：前言自定義指令在中是比較難的一個(gè)點(diǎn)，寫了這么長時(shí)間也只會一些簡單的單指令，翻出用開發(fā)下一代應(yīng)用，拿出里面的例子好好啃一下。

0x00 前言

自定義指令在angular中是比較難的一個(gè)點(diǎn)，寫了這么長時(shí)間也只會一些簡單的單指令，翻出《用AngularJS開發(fā)下一代Web應(yīng)用》，拿出里面的accordion例子好好啃一下。

這個(gè)例子整體比較簡單，但是還是需要了解一些點(diǎn)：

自定義指令語法

指令獨(dú)立作用域：這里雙向綁定用=

指令transclude

指令controller：require的controller作為link函數(shù)的第四個(gè)參數(shù)

指令link函數(shù)：每個(gè)指令都執(zhí)行一次，而compile只編譯一次

0x01 效果

很簡單的點(diǎn)擊一個(gè)當(dāng)前展開，其他折疊
其中expander是從controller中循環(huán)出來的

預(yù)覽：https://jsfiddle.net/savokiss/fh5sv52u/

0x02 View 
  
      
          {{expander.text}}

需要兩個(gè)自定義指令accordion和expander

0x03 Controller 
  $scope.expanders = [{
    title : "Click me to expand",
    text : "Hi there folks, I am the content that was hidden but is now shown."
  }, {
    title : "Click this",
    text : "I am even better text than you have seen previously"
  }, {
    title : "Test",
    text : "test"
  }];

只有一個(gè)數(shù)組，定義了expander的title和text

0x04 Directives 父級指令accordion 
myModule.directive("accordion",function(){
  return {
          restrict : "EA",
          replace : true,
          transclude : true,
          template : "
",
          controller : function() {
              var expanders = [];
              this.gotOpened = function(selectedExpander) {
                  angular.forEach(expanders, function(expander) {
                      if (selectedExpander != expander) {
                          expander.showMe = false;
                      }
                  });
              };
              this.addExpander = function(expander) {
                  expanders.push(expander);
              };
          }
      };
});

這是手風(fēng)琴菜單的父級指令，他的作用主要為：

expanders用來存放子指令的數(shù)據(jù)（即子集scope）

addExpander方法用來在子指令調(diào)用link函數(shù)時(shí)初始化expanders數(shù)組

gotOpened方法用來提供給子指令關(guān)閉其他expander

子集指令expander 
myModule.directive("expander", function(){
  return {
          restrict : "EA",
          replace : true,
          transclude : true,
          require : "^?accordion",
          scope : {
              expanderTitle : "="
          },
          template : "
"
                   + "
{{expanderTitle}}
"
                   + "
"
                   + "
",
          link : function(scope, iElement, iAttrs, accordionController) {
              scope.showMe = false;
              accordionController.addExpander(scope);
              scope.toggle = function toggle() {
                  scope.showMe = !scope.showMe;
                  accordionController.gotOpened(scope);
              };
          }
      };
});

此指令說明：

require了accordion指令，所以link函數(shù)的最后一個(gè)參數(shù)就是accordion的controller

獨(dú)立scope中的expanderTitle用來雙向綁定controller中的title

transclude用來直接將view中的代碼傳進(jìn)來，當(dāng)然這里只顯示了expander的text

link函數(shù)提供了flag: scope.showMe，用來控制expander的展開狀態(tài)

link函數(shù)中初始化showMe為false，初始化將當(dāng)前指令的scope添加到父級指令的expander數(shù)組中去

提供給自己scope.toggle方法，用來在切換開關(guān)狀態(tài)，并調(diào)用父級指令關(guān)閉其他兄弟

0x05 完

基本上就是這些點(diǎn)，全get到就差不多也能寫類似的指令了~

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78369.html

相關(guān)文章

  • ngVerify - 更高效的 AngularJS 表單驗(yàn)證

    ngVerify v1.5.6 a easy AngularJS Form Validation plugin.簡潔高效的__表單驗(yàn)證插件__ See how powerful it.看看它有多強(qiáng)大 動態(tài)校驗(yàn) 自動關(guān)聯(lián)提交按鈕 多種 tip 校驗(yàn)消息提示 不只校驗(yàn) dom 元素值，還可以校驗(yàn) ngModel 數(shù)據(jù)模型 支持任意類型表單元素，甚至可以校驗(yàn)非表單元素 提供 type 類型校驗(yàn)?zāi)０?..

    shiina 評論0 收藏0

  • AngularJS簡述

    流行框架 簡介 angularjs是一款非常優(yōu)秀的前端高級JS框架，由谷歌團(tuán)隊(duì)開發(fā)維護(hù)，能夠快速構(gòu)建單頁web應(yīng)用，化繁為簡 無論是angularjs還是jQuery都是用原生JS封裝的 庫：對代碼進(jìn)行封裝，調(diào)用封裝的方法，簡化操作 傳統(tǒng)方式是用get方式獲取元素，然后點(diǎn)方法 jQuery庫實(shí)現(xiàn)了對獲取方式的封裝，對方法的封裝 框架：提供代碼書寫規(guī)則，按照規(guī)則去寫代碼，框架會幫我們實(shí)現(xiàn)響應(yīng)的功能...

    Jason 評論0 收藏0

  • AngularJs功能（九）--路由

    摘要：該內(nèi)的內(nèi)容會根據(jù)路由的變化而變化。配置，用來定義路由規(guī)則。由此我們就需要另一個(gè)第三方路由模塊，叫做，當(dāng)然它是基于開發(fā)的。造成這種現(xiàn)象的最根本原因路由沒有明確的父子層級關(guān)系。監(jiān)聽路由路由狀態(tài)發(fā)生改變時(shí)可以通過監(jiān)聽，通過注入實(shí)現(xiàn)狀態(tài)的管理。 何為路由 路由機(jī)制運(yùn)可以實(shí)現(xiàn)多視圖的單頁Web應(yīng)用（single page web application，SPA）。 單頁應(yīng)用在使用期間不會重新加載...

    mingde 評論0 收藏0

  • [譯] 如何使用 TypeScript 編寫自定義 AngularJS 指令？

    摘要：在這篇文章中，我將告訴你如何用編寫自定義指令。中的自定義指令讓我們來創(chuàng)建一個(gè)只為任何的塊，小部件或者人名在右邊添加標(biāo)題，子標(biāo)題和文本的指令。另外，設(shè)置了指令的使用級別給元素和屬性，分別使用和表示。 原文鏈接 : How to write custom AngularJS Directive using TypeScript?原文作者 : Siddharth Pandey譯者 : 李林璞...

    CloudwiseAPM 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<