自定义指令实现手风琴菜单 AngularJS

RyanHoo 发布于2019-08-19 17:17 / 1329人阅读

摘要：前言自定义指令在中是比较难的一个点，写了这么长时间也只会一些简单的单指令，翻出用开发下一代应用，拿出里面的例子好好啃一下。

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到就差不多也能写类似的指令了~

服务器托管混合云自定义指令自定义指令实例自定义菜单自定义菜单详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78369.html

ngVerify - 更高效的 AngularJS 表单验证

ngVerify v1.5.6 a easy AngularJS Form Validation plugin.简洁高效的__表单验证插件__ See how powerful it.看看它有多强大动态校验自动关联提交按钮多种 tip 校验消息提示不只校验 dom 元素值，还可以校验 ngModel 数据模型支持任意类型表单元素，甚至可以校验非表单元素提供 type 类型校验模板...

shiina 2019-08-20 10:20 评论0 收藏0
AngularJS简述

流行框架简介 angularjs是一款非常优秀的前端高级JS框架，由谷歌团队开发维护，能够快速构建单页web应用，化繁为简无论是angularjs还是jQuery都是用原生JS封装的库：对代码进行封装，调用封装的方法，简化操作传统方式是用get方式获取元素，然后点方法 jQuery库实现了对获取方式的封装，对方法的封装框架：提供代码书写规则，按照规则去写代码，框架会帮我们实现响应的功能...

Jason 2019-08-23 11:25 评论0 收藏0
AngularJS技术使用经验-达观数据

摘要：达观数据陈高星本文主要涵盖模型，和数据双向绑定模块路由过滤器和自定义过滤器服务和自定义服务，指令和自定义指令依赖注入继承。负责响应于用户输入并执行交互数据模型对象。七指令和自定义指令指令使我们用来扩展浏览器能力的技术之一。表示提取整个元素。 AngularJs诞生于2009年，最初由Misko Hevery和Adam Abrons开发，后来成为Google的项目。AngularJS 是...

lansheng228 2019-05-28 18:29 评论0 收藏0
AngularJs功能（九）--路由

摘要：该内的内容会根据路由的变化而变化。配置，用来定义路由规则。由此我们就需要另一个第三方路由模块，叫做，当然它是基于开发的。造成这种现象的最根本原因路由没有明确的父子层级关系。监听路由路由状态发生改变时可以通过监听，通过注入实现状态的管理。何为路由路由机制运可以实现多视图的单页Web应用（single page web application，SPA）。单页应用在使用期间不会重新加载...

mingde 2019-08-22 13:59 评论0 收藏0
[译] 如何使用 TypeScript 编写自定义 AngularJS 指令？

摘要：在这篇文章中，我将告诉你如何用编写自定义指令。中的自定义指令让我们来创建一个只为任何的块，小部件或者人名在右边添加标题，子标题和文本的指令。另外，设置了指令的使用级别给元素和属性，分别使用和表示。原文链接 : How to write custom AngularJS Directive using TypeScript?原文作者 : Siddharth Pandey译者 : 李林璞...

CloudwiseAPM 2019-08-21 10:56 评论0 收藏0