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 相关文章推荐
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
js加密解密字符串可自定义密码因子
May 13 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
JQuery 风格的HTML文本转义
2009/07/01 Javascript
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
python万年历实现代码 含运行结果
2017/05/20 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
详解重置Django migration的常见方式
2019/02/15 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
高中三年学习生活的自我评价
2013/10/10 职场文书
创业计划书撰写原则
2014/01/25 职场文书
安全生产责任书范本
2014/04/15 职场文书
党委班子剖析材料
2014/08/21 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA