在Angularjs中使用directive自定义指令实现attribute的继承
一、Html代码:
1 <!DOCTYPE html>2 <html xmlns="http://www.w3.org/1999/xhtml">3 <head>4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5 <title></title>6 <script src="../../Content/Plugins/Angular/angular.min.js"></script>7 </head>8 <body ng-app="mainApp" ng-controller="mainController">9 <quber-grid style="border: 1px solid #f00;" title="qubernet"></quber-grid>
10 </body>
11 </html>
二、tmp.html文件
1 <div quber-grid-attr>
2 我是测试的模板内容!
3 </div>
三、Js代码:
1 //初始化Angular对象2 var myNg = angular.module('mainApp', []);3 4 myNg.directive('quberGrid', function () {5 return {6 restrict: 'EA',7 replace: true,//移除<quber-grid>标签8 templateUrl: 'tmp.html',9 link: function (sco, ele, attr) {
10 //通知下属DOM,执行名为sendChildGridAttr的事件
11 sco.$broadcast('sendChildGridAttr', attr);
12 }
13 };
14 });
15 myNg.directive('quberGridAttr', function () {
16 return {
17 restrict: 'A',
18 link: function (sco, ele, attr) {
19 sco.$on('sendChildGridAttr', function (event, data) {
20 angular.forEach(data, function (val, key, obj) {
21 if (key != '$attr' && key != '$$element') {
22 //设置标签属性和值
23 attr.$set(key, val);
24 }
25 });
26 });
27 }
28 };
29 });
30
31 myNg.controller('mainController', function ($scope) { });
效果如下所示:
在Angularjs中使用directive自定义指令实现attribute的继承相关推荐
- AngularJs中的directives(指令part1)
一.指令的职责 指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 ...
- AngularJS:如何使用自定义指令来取代ng-repeat
引言 本文主要介绍了另一种即具有与ng-repeat 一样处理大量数据的绑定的功能,又具有超高的性能. 对于处理小数量,ng-repeat是非常有用的,但是如果需要处理非常大的数量集,还是采用自定义的 ...
- AngularJS 详解Directive(指令)机制
AngularJS 5个实例详解Directive(指令)机制 大漠穷秋 http://damoqiongqiu.iteye.com/blog/1917971 1.一点小说明 指令的作用:实现语义 ...
- angular directive自定义指令
先来看一下自定义指令的写法 app.directive('', ['', function(){// Runs during compilereturn {// name: '',// priorit ...
- Vue.directive自定义指令
Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色. 写好了这个功能,我们现在就自己定义一个全局的指令.我们这里使用Vue.directi ...
- Vue中过滤器和自定义指令详解
目录 1,局部过滤器 1.1定义: 1.2案例 2,全局过滤器 2.1定义: 2.2案例 3.自定义指令 3.1定义: 3.2案例 3.3自定义指令全局写法 1,局部过滤器 1.1定义: Vue.js ...
- Vue中directives用法--自定义指令控制按钮权限
1. 新建 hasPermission.js文件 const hasPermission = {install (Vue, options) {Vue.directive('has', {insert ...
- Vue directive 自定义指令
Vue自定义指令一共有5个钩子函数,分别是: bind.inserted.update.componentUpdate .unbind bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行 ...
- slot插槽以及directive自定义指令的使用
slot 插槽的基础使用 页面 A.vue 默认情况下,在使用组件的时候,提供的内容会被填充到名字为 default 的插槽中 <Left><p>这段话会被插入到Left组件的 ...
- vue.directive自定义指令 vue.set使用示例
最新文章
- 挑战权威还是偏离主流?颠覆性研究或将证明神经信号是机械波
- eolinker开源版5_开源土豪沉金版空气质量检测仪AirWolf
- 阿里人工智能实验室新入职两名首席科学家,年薪百万美元
- Python入门100题 | 第016题
- Docker 网络之进阶篇
- stm32 DMA 配置 串口程序
- 用tcc自己编译自己
- 人工智能诗歌写作平台_智能写作VS人工写作,Giiso写作机器人解放你的创造力...
- 【转】深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing) 第一节 理解堆与栈
- 【转】Web服务软件工厂
- LLBL Gen 3.x 源代码追踪与解析 Type Converter 类型转换器
- leaflet 鼠标移动到图层时变_leaflet 图层切换报错
- Java实习日记(day1)
- 什么是项目管理,如何做好项目管理?
- 桌面窗口管理器dwm.exe内存过高,intel核显内存泄漏问题(附核显升级链接)
- 关于Maven中pom文件标签的详解,分别对比父工程pom文件与子工程pom文件。
- 声音均衡器怎么调好听_均衡器怎么调能达到最佳效果(十段均衡器最佳效果图)...
- 小程序复制文字、保存图片
- 常见的思科10G光模块参数及板卡支持的光模块类型
- 电路的分析方法-电压源串联电阻与电流源并联电阻等效,戴维南等效,诺顿等效
热门文章
- 有关onpropertychange事件
- 图论专题考试2 爆零祭
- 【翻译】BCGControlBar Professional Edition for MFC v 29.0重大更新
- 区块链应用 | 区块链火了,这到底是虚火还是实火?
- Mesos:拒绝微软1.4亿美金收购的独角兽
- VB模拟键盘输入的N种方法
- IIS HTTP文件服务器搭建步骤
- Windows 8实例教程系列 - 数据绑定高级实例
- \sbin\nginx:cannot execute binary file
- 从副总裁做”表哥“说起