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

学而思之 2016-08-05

本文实例讲述了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程序设计有所帮助。

学而思之

学而思之

相关推荐

angularjs中directive指令与component组件有什么区别？

我在前面花了两篇博客分别系统化介绍了angularjs中的directive指令与component组件，当然directive也能实现组件这点毋庸置疑。在了解完两者后，即便我们知道component就像删减版的directive，用法上大同小异，但两者在

xingdongfang / 0评论 2019-11-10

AngularJs 指令directive之transclude

transclude - 编译元素的内容，使它能够被directive所用。需要配合ngTransclude使用(引用)

zhenghao / 0评论 2014-05-30

AngularJs 指令directive之require

controller的用法分为两种情形，一种是require自定义的controller，由于自定义controller中的属性方法都由自己编 写，使用起来比较简单；另一种方法则是require AngularJS内建的指令，其中大部分时间需要requir

youyouzouzou / 0评论 2014-05-30

AngularJs 指令directive之controller，link，compile

关于自定义指令的命名，你可以随便怎么起名字都行，官方是推荐用[命名空间-指令名称]这样的方式，像ng-controller。不过你可千万不要用 ng-前缀了，防止与系统自带的指令重名。另外一个需知道的地方，指令命名时用驼峰规则，使用时用-分割各单词。lin

zbwroom / 0评论 2014-05-30

认识AngularJS Directive

指令是我们用来扩展浏览器能力的技术之一。在DOM编译期间，和html关联着的指令会被检测到，并且被执行。这使得指令可以为DOM指定行为，或者改变它的DOM结构。指令可以作为元素名，属性名，类名，或者注释。这个方法会遍历DOM，并对指令进行匹配。如果匹配成功

LDN0 / 0评论 2014-07-02

AngularJS内幕详解之Directive

　　在这系列的上一篇文章，我讨论了scope事件以及digest循环的行为。这篇文章包括 独立的scope，内嵌，link函数，编译器，指令控制器等等。　　如果这个图表看起来非常的费解，那么这篇文章很适合你。　　声明: 这篇文字是基于 AngularJS

CrazyDogWang / 0评论 2017-09-10

element el-input directive数字进行控制

element.value = Number.toFixed // 失焦时候格式化

AJ / 0评论 2018-10-11

angularJS自定义directive之带参方法传递详解

<button style="width: 10%;height: 15%;color: black;" ng-click="sendEmail">提交</button>. <my-em

老卫的技术站 / 0评论 2018-10-09

AngularJS内幕详解之Directive

在这系列的上一篇文章，我讨论了scope事件以及digest循环的行为。这篇文章包括 独立的scope，内嵌，link函数，编译器，指令控制器等等。如果这个图表看起来非常的费解，那么这篇文章很适合你。声明: 这篇文字是基于 AngularJS v1.3.0

zbwroom / 0评论 2017-09-10

element el-input directive数字

背景使用element开发的过程中遇到循环的数据只能输入数字，并且有不要小数点，有需要小数点的使用vue directive 进行控制。element.value = Number.toFixed // 失焦时候格式化

lujingjing / 0评论 2019-06-28

angularjs directive 指令 学习笔记之scope作用域（二）

Scope 是创建可以复用指令的必要条件，每个指令都有其唯一的作用域，它不依赖于父scope。scope 对象定义names 和types 变量。上面的例子即创建了3个scope变量。指令可以使用该值但无法修改，是最常用的变量。指令检索主Scope中的引用

Oranq / 0评论 2017-03-22

angularjs directive 指令 学习笔记之基础（一）

restrict 是一个可选的参数。它告诉AngularJS这个指令在DOM中可以何种形式被声明。认AngularJS认为 restrict 的值是 A ，即以属性的形式来进行声明。优先级参数可以被设置为一个数值。大多数指令会忽略这个参数，使用默认值0，但

CrazyDogWang / 0评论 2016-06-07

AngularJS -- Directive（指令）机制

</tabpanel>很多人可能要惊呼，这货和JSP或者Struts等等框架里面的taglib很像啊！呃，说实话，实际上就是这样的，只不过这里是使用JavaScript来实现的。正因为如此，所以很多taglib做不到的功能，使用它就都可以做到，

lizean / 0评论 2016-05-20

AngularJS -- Directive、Controller、Service区别

AngularJS是一款非常强大的前端MVC框架。同时，它也引入了相当多的概念，这些概念我们可能不是太熟悉。SERVICES（服务） 如果你已经使用过AngularJS，你可能已经遇到过Service这个概念了，简而言之，Service就是在Angluar

zhenghao / 0评论 2016-05-17

《AngularJS》5个实例详解Directive（指令）机制

本文整理并扩展了《AngularJS》这本书第六章里面的内容，此书近期即将由电子工业出版社出版，敬请期待口令：Angular. </tabpanel>很多人可能要惊呼，这货和JSP或者Struts等等框架里面的taglib很像啊！呃，说实话，实

youyouzouzou / 0评论 2016-05-11

AngularJs 指令directive之transclude

transclude - 编译元素的内容，使它能够被directive所用。需要配合ngTransclude使用(引用)

zbwroom / 0评论 2014-05-30

AngularJs 指令directive之require

controller的用法分为两种情形，一种是require自定义的controller，由于自定义controller中的属性方法都由自己编 写，使用起来比较简单；另一种方法则是require AngularJS内建的指令，其中大部分时间需要requir

zhenghao / 0评论 2014-05-30

AngularJs 指令directive之controller，link，compile

关于自定义指令的命名，你可以随便怎么起名字都行，官方是推荐用[命名空间-指令名称]这样的方式，像ng-controller。不过你可千万不要用 ng-前缀了，防止与系统自带的指令重名。另外一个需知道的地方，指令命名时用驼峰规则，使用时用-分割各单词。});

lizean / 0评论 2014-05-30

Angular 进阶：从源码理解@Input绑定是如何被编译和实现的

阅读本文需要已经对ngc输出的代码、Angular packages/core源码有所熟悉。这是我搭建的一个直接可以使用的Angular aot demo项目，具体功能和用法可以看README，我认为它对于深入学习Angular源码十分有帮助。另外需要注意

Cricket / 0评论 2019-06-26

温故知新:Angular下的 directive

Angularjs提供的directive指令可以用来写自己的命令甚至标签。});在这里面定义了名为example的directive，它是一个function,返回值是一个对象:. restrict属性表明example要匹配的的是一个标签('E')还是

lizean / 0评论 2013-12-20

angularJS directive用法详解

最近学习了下angularjs指令的相关知识，也参考了前人的一些文章，在此总结下。欢迎批评指出错误的地方。（字符串）可选参数，指明指令在DOM里面以什么形式被声明；注意：如果想支持IE8，则最好使用属性和类形式来定义。})HTML代码：<direct

拓宇 / 0评论 2019-06-20

Flex 编译CSS文件的错误：Invalid Embed directive in stylesheet

今天试图重新改变现有的CSS Framework，放弃之前自定义的CSSLoader，采用运行时加载CSS的方式。不过目前还是做尝试，需分析两种方式所能处理的各种情况，找出需要处理的特殊情况，然后分析是否值得更改。采用运行时加载CSS的方式需将CSS文件预

JenniferMuMu / 0评论 2011-01-13

Akka HTTP：自定义指令（Directive）

将已有指令通过命名配置的方式来定义新的指令转换已存在的指令从头开始实现一个指令命名配置。创建自定义指令最简便的方法就是将一个或多个已有指令通过配置的方式分配一个新的名字来定义。事实上Akka HTTP预定义的大多数指令都由以较低级别指令命名配置的方式来定义

nobodyxiaomi / 0评论 2018-10-14

Akka HTTP：自定义指令（Directive）

将已有指令通过命名配置的方式来定义新的指令转换已存在的指令从头开始实现一个指令命名配置。创建自定义指令最简便的方法就是将一个或多个已有指令通过配置的方式分配一个新的名字来定义。事实上Akka HTTP预定义的大多数指令都由以较低级别指令命名配置的方式来定义

nobodyxiaomi / 0评论 2018-10-13

Angular.js通过自定义指令directive实现滑块滑动效果

最近因为工作需要让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动，说明一下我们项目使用技术angularJs.大家都知道，使用jquery很好实现。那么angular如何实现呢，我用的是自定义指令。<div ng-style="mas

闲听风月 / 0评论 2017-10-13

angularjs利用directive实现移动端自定义软键盘的示例

最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘，刚接到需求有点懵，因为之前没有做过，后来理了一下思路发现这东西也就那样。先看一下实现之后的效果：。产品经理那边给的原因是iPad屏幕本来就小，如

夏小球 / 0评论 2017-09-20

Angularjs自定义指令Directive详解

今天学习angularjs自定义指令Directive。Directive是一个非常棒的功能。可以实现我们自义的的功能方法。下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Admin"。@Scripts.Render以上是AS

Inuyasha / 0评论 2017-05-27

详解angular2采用自定义指令（Directive）方式加载jquery插件

由于angular2兴起不久，相关插件还是很少，所以有时候不得不用一些jquery插件来完成项目，首先创建一个指令，采用@input方式，来获取jquery插件所需要的参数。所以这里采用bind的形式，把this传递进去。这样在angular中的函数才会被

delmarks / 0评论 2017-02-09

AngularJS中directive指令使用之事件绑定与指令交互用法示例

本文实例讲述了AngularJS中directive指令使用之事件绑定与指令交互用法。分享给大家供大家参考，具体如下：。/*=======================3. 元素 属性 控制器之间的交互========================*/

飞鹰 / 0评论 2016-11-22

前端框架Vue.js中Directive知识详解

看上去虽然和Angular中的定义类似，Directive 都是对DOM功能的一种拓展，但是 Vue 的 Directive 要弱的多。因为 Vue Component 其实本来就会包含对DOM的操作，所以大多数时候我们写一个通用组件都是一个Compone

nonameisna / 0评论 2016-09-12

AngularJS学习笔记之directive——scope选项与绑定策略

开门见山地说，scope:{}使指令与外界隔离开来，使其模板处于non-inheriting(无继承)的状态，当然除非你在其中使用了transclude嵌入，这点之后的笔记会再详细记录的。但是这显然不符合实际开发中的需求，因为实际上，我们经常想要我们的指令

lizean / 0评论 2015-05-02

AngularJS - 自定义指令

试着感受这些因素，让自己更高效地编写AngularJS应用。定义一个指令本质上是在HTML中通过元素、属性、类或注释来添加功能。AngularJS的内置指令都是以ng开头，如果想自定义指令，建议自定义一个前缀代表自己的命名空间。这里我们先使用my作为前缀:

lizean / 0评论 2015-02-16

学习AngularJs:Directive指令用法（完整版）

通过这个Directive，我们可以封装很多公共指令，比如分页指令、自动补全指令等等。一般情况下，需要用Directive有下面的情景：1. 使你的Html更具语义化，不需要深入研究代码和逻辑即可知道页面的大致逻辑。

Inuyasha / 0评论 2016-04-26

AngularJS directive返回对象属性详解

本章主要讲解directive返回对象中比较简单的属性。angularjs中使用.directive()来定义指令，该方法接收两个参数：name、factory_function. 不知道这么理解是否合理，但确实也是一个很好的可以借鉴的选择方法标准。该属性

飞鹰 / 0评论 2016-03-28

AngualrJS中每次$http请求时的一个遮罩层Directive

AngularJS是一款非常强大的前端MVC框架。在AngualrJS中使用$http每次向远程API发送请求，等待响应，这中间有些许的等待过程。请求的时候，弹出一个遮罩层，收到响应的时候把遮罩层隐藏。</div>显示加载的图片被包含在Dire

xpnew的技术blog / 0评论 2016-01-26

理解AngularJs指令

对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素的功能。restrict是一个可选的参数。用于指定该指令在DOM中以何种形式被声明。默认值是A，即以属性的形式来进行声明。但同当前指令优先级相同的指令还是会被执行。一段HTML

飞鹰 / 0评论 2015-12-10

由于Nginx配置文件问题导致打不开网站unknown directive的解决

当时就毛了，ping是通的，连vpn也是通的，唯独网站打不开，看来肯定是把nginx的配置文件弄坏了。这样就确定了是nginx.conf的问题了，由于不熟悉文件结构，只好比对着nginx.conf.default仔细检查。看到最后终于发现了问题。http{

0与的世界 / 0评论 2018-06-06

nginx: [warn] "log_format" directive used only on "http" level 解决方法

将nginx升级到1.2.4稳定版之后，会发现之前的vhost/*.conf中的日志配置都报了如下的warn：。原来log_format需要在nginx.conf的http层定义，然后在分域名下面就不用定义log_format，直接引用即可，即：。log_

ssihc0 / 0评论 2019-04-10

vue.js实现内部自定义指令和全局自定义指令------directive

在Vue中，我们平时数据驱动视图时候，内部自带的指令有时候解决不了一些需求，这时候，Vue给我们一个很好用的东东。inserted: 被绑定元素插入父节点时调用。通过比较更新前后的绑定值，可以忽略不必要的模板更新。

软件设计 / 0评论 2017-07-10

angularjs中的directive

编程爱好者联盟 / 0评论 2016-11-22