国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

自定義指令實現手風琴菜單 AngularJS

RyanHoo / 1463人閱讀

摘要：前言自定義指令在中是比較難的一個點，寫了這么長時間也只會一些簡單的單指令，翻出用開發下一代應用，拿出里面的例子好好啃一下。

0x00 前言

自定義指令在angular中是比較難的一個點，寫了這么長時間也只會一些簡單的單指令，翻出《用AngularJS開發下一代Web應用》，拿出里面的accordion例子好好啃一下。

這個例子整體比較簡單，但是還是需要了解一些點：

自定義指令語法

指令獨立作用域：這里雙向綁定用=

指令transclude

指令controller：require的controller作為link函數的第四個參數

指令link函數：每個指令都執行一次，而compile只編譯一次

0x01 效果

很簡單的點擊一個當前展開，其他折疊
其中expander是從controller中循環出來的

預覽：https://jsfiddle.net/savokiss/fh5sv52u/

0x02 View 
  
      
          {{expander.text}}

需要兩個自定義指令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"
  }];

只有一個數組，定義了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);
              };
          }
      };
});

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

expanders用來存放子指令的數據（即子集scope）

addExpander方法用來在子指令調用link函數時初始化expanders數組

gotOpened方法用來提供給子指令關閉其他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函數的最后一個參數就是accordion的controller

獨立scope中的expanderTitle用來雙向綁定controller中的title

transclude用來直接將view中的代碼傳進來，當然這里只顯示了expander的text

link函數提供了flag: scope.showMe，用來控制expander的展開狀態

link函數中初始化showMe為false，初始化將當前指令的scope添加到父級指令的expander數組中去

提供給自己scope.toggle方法，用來在切換開關狀態，并調用父級指令關閉其他兄弟

0x05 完

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78369.html

相關文章

  • ngVerify - 更高效的 AngularJS 表單驗證

    ngVerify v1.5.6 a easy AngularJS Form Validation plugin.簡潔高效的__表單驗證插件__ See how powerful it.看看它有多強大 動態校驗 自動關聯提交按鈕 多種 tip 校驗消息提示 不只校驗 dom 元素值，還可以校驗 ngModel 數據模型 支持任意類型表單元素，甚至可以校驗非表單元素 提供 type 類型校驗模板...

    shiina 評論0 收藏0

  • AngularJS簡述

    流行框架 簡介 angularjs是一款非常優秀的前端高級JS框架，由谷歌團隊開發維護，能夠快速構建單頁web應用，化繁為簡 無論是angularjs還是jQuery都是用原生JS封裝的 庫：對代碼進行封裝，調用封裝的方法，簡化操作 傳統方式是用get方式獲取元素，然后點方法 jQuery庫實現了對獲取方式的封裝，對方法的封裝 框架：提供代碼書寫規則，按照規則去寫代碼，框架會幫我們實現響應的功能...

    Jason 評論0 收藏0

  • AngularJs功能（九）--路由

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

    mingde 評論0 收藏0

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

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

    CloudwiseAPM 評論0 收藏0

發表評論

0條評論

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