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动态加载样式表的方法
Mar 21 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
微信小程序实现上传图片功能
May 28 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
Python中使用logging模块打印log日志详解
2015/04/05 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
不可错过的十本Python好书
2017/07/06 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
Python Pillow Image Invert
2019/01/22 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
学校清明节活动总结
2014/07/04 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
高中生逃课检讨书
2014/10/10 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
导游词之安徽九华山
2019/09/18 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python