摘要:前言自定义指令在中是比较难的一个点,写了这么长时间也只会一些简单的单指令,翻出用开发下一代应用,拿出里面的例子好好啃一下。
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 父级指令accordionmyModule.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
子集指令expandermyModule.directive("expander", function(){ return { restrict : "EA", replace : true, transclude : true, require : "^?accordion", scope : { expanderTitle : "=" }, template : "" + "", link : function(scope, iElement, iAttrs, accordionController) { scope.showMe = false; accordionController.addExpander(scope); scope.toggle = function toggle() { scope.showMe = !scope.showMe; accordionController.gotOpened(scope); }; } }; });{{expanderTitle}}" + "" + "
此指令说明:
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 v1.5.6 a easy AngularJS Form Validation plugin.简洁高效的__表单验证插件__ See how powerful it.看看它有多强大 动态校验 自动关联提交按钮 多种 tip 校验消息提示 不只校验 dom 元素值,还可以校验 ngModel 数据模型 支持任意类型表单元素,甚至可以校验非表单元素 提供 type 类型校验模板...
流行框架 简介 angularjs是一款非常优秀的前端高级JS框架,由谷歌团队开发维护,能够快速构建单页web应用,化繁为简 无论是angularjs还是jQuery都是用原生JS封装的 库:对代码进行封装,调用封装的方法,简化操作 传统方式是用get方式获取元素,然后点方法 jQuery库实现了对获取方式的封装,对方法的封装 框架:提供代码书写规则,按照规则去写代码,框架会帮我们实现响应的功能...
摘要:该内的内容会根据路由的变化而变化。配置,用来定义路由规则。由此我们就需要另一个第三方路由模块,叫做,当然它是基于开发的。造成这种现象的最根本原因路由没有明确的父子层级关系。监听路由路由状态发生改变时可以通过监听,通过注入实现状态的管理。 何为路由 路由机制运可以实现多视图的单页Web应用(single page web application,SPA)。 单页应用在使用期间不会重新加载...
摘要:在这篇文章中,我将告诉你如何用编写自定义指令。中的自定义指令让我们来创建一个只为任何的块,小部件或者人名在右边添加标题,子标题和文本的指令。另外,设置了指令的使用级别给元素和属性,分别使用和表示。 原文链接 : How to write custom AngularJS Directive using TypeScript?原文作者 : Siddharth Pandey译者 : 李林璞...
阅读 2054·2021-11-23 10:13
阅读 2774·2021-11-09 09:47
阅读 2699·2021-09-22 15:08
阅读 3293·2021-09-03 10:46
阅读 2218·2019-08-30 15:54
阅读 891·2019-08-28 18:09
阅读 2392·2019-08-26 18:26
阅读 2321·2019-08-26 13:48