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 相关文章推荐
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
浅析js封装和作用域
Jul 09 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
vue实现一个炫酷的日历组件
Oct 08 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读注册表
2006/10/09 PHP
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
收集的几个Python小技巧分享
2014/11/22 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
python-numpy-指数分布实例详解
2019/12/07 Python
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
高一自我鉴定
2013/12/17 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
环保专项行动方案
2014/05/12 职场文书
施工工地安全标语
2014/06/07 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
财务管理专业自荐书
2014/09/02 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
九年级语文教学反思
2016/03/03 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
MySQL Server 层四个日志
2022/03/31 MySQL
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL