Angularjs使用directive自定义指令实现attribute继承的方法详解


Posted in Javascript onAugust 05, 2016

本文实例讲述了Angularjs使用directive自定义指令实现attribute继承的方法。分享给大家供大家参考,具体如下:

一、Html代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script src="../../Content/Plugins/Angular/angular.min.js"></script>
</head>
<body ng-app="mainApp" ng-controller="mainController">
  <quber-grid style="border: 1px solid #f00;" title="qubernet"></quber-grid>
</body>
</html>

二、tmp.html文件

<div quber-grid-attr>
  我是测试的模板内容!
</div>

三、Js代码:

//初始化Angular对象
var myNg = angular.module('mainApp', []);
myNg.directive('quberGrid', function () {
    return {
      restrict: 'EA',
      replace: true,//移除<quber-grid>标签
      templateUrl: 'tmp.html',
      link: function (sco, ele, attr) {
        //通知下属DOM,执行名为sendChildGridAttr的事件
        sco.$broadcast('sendChildGridAttr', attr);
      }
    };
});
myNg.directive('quberGridAttr', function () {
    return {
      restrict: 'A',
      link: function (sco, ele, attr) {
        sco.$on('sendChildGridAttr', function (event, data) {
          angular.forEach(data, function (val, key, obj) {
            if (key != '$attr' && key != '$$element') {
              //设置标签属性和值
              attr.$set(key, val);
            }
          });
        });
      }
    };
});
myNg.controller('mainController', function ($scope) { });

效果如下:

Angularjs使用directive自定义指令实现attribute继承的方法详解

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 获取用户客户端操作系统版本
Aug 25 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
Angular4编程之表单响应功能示例
Dec 13 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
js从外部获取图片的实现方法
Aug 05 #Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 #Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 #Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 #Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 #Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 #Javascript
jQuery实现定位滚动条位置
Aug 05 #Javascript
You might like
用PHP读取RSS feed的代码
2008/08/01 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
php表单敏感字符过滤类
2014/12/08 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
Python类的多重继承问题深入分析
2014/11/09 Python
python字符串循环左移
2019/03/08 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
优秀体育委员自荐书
2014/01/31 职场文书
应届生求职自荐信范文
2014/04/07 职场文书
初三学习计划书范文
2014/04/30 职场文书
社会实践活动总结范文
2014/07/03 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
php TP5框架生成二维码链接
2021/04/01 PHP