Angularjs使用directive自定义指令实现attribute继承的方法详解  更新时间:2016年08月05日 11:52:24   作者:Quber   这篇文章主要介绍了Angularjs使用directive自定义指令实现attribute继承的方法,结合实例形式较为详细的分析了基于directive自定义指令实现attribute继承的具体步骤与相关技巧,需要的朋友可以参考下 本文实例讲述了Angularjs使用directive自定义指令实现attribute继承的方法。分享给大家供大家参考,具体如下: 一、Html代码: 二、tmp.html文件 我是测试的模板内容! 三、Js代码: //初始化Angular对象 var myNg = angular.module(‘mainApp’, []); myNg.directive(‘quberGrid’, function () { return { restrict: ‘EA’, replace: true,//移除标签 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程序设计有所帮助。 您可能感兴趣的文章: 基于Angular.js实现的触摸滑动动画实例代码 利用angularjs1.4制作的简易滑动门效果 详解angularJs中自定义directive的数据交互 AngularJS中的Directive自定义一个表格 详解angular2采用自定义指令(Directive)方式加载jquery插件 Angularjs自定义指令Directive详解 angularjs利用directive实现移动端自定义软键盘的示例 Angular.js通过自定义指令directive实现滑块滑动效果 Angularjs directive 自定义指令 相关文章 Angular 2应用的8个主要构造块有哪些 这篇文章主要为大家详细介绍了Angular 2应用的8个主要构造块,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2016-10-10 AngularJS模态框模板ngDialog的使用详解 这篇文章主要介绍了AngularJS模态框模板ngDialog的使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-05-05 Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法 这篇文章主要介绍了Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法,需要的朋友可以参考下 2017-10-10 深入理解AngularJs-scope的脏检查(一) 这篇文章主要介绍了深入理解AngularJs-scope的脏检查(一) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 ionic3+Angular4实现接口请求及本地json文件读取示例 本篇文章主要介绍了ionic3+Angular4实现接口请求及本地json文件读取示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-10-10 Angularjs实现页面模板清除的方法 这篇文章主要介绍了Angularjs实现页面模板清除的方法,需要的朋友可以参考下 2018-07-07 AngularJS执行流程详解 本文主要介绍了AngularJS的执行流程。具有很好的参考价值,下面跟着小编一起来看下吧 2017-02-02 如何在AngularJs中调用第三方插件库 在AngularJs中我们会不可避免的使用第三方库,这篇文章主要介绍了如何在AngularJs中调用第三方插件库,有兴趣的可以了解下 2017-05-05 详解Angular路由之路由守卫 这篇文章主要介绍了详解Angular路由之路由守卫,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-05-05 AngularJS select设置默认值的实现方法 这篇文章主要介绍了AngularJS select设置默认值的实现方法的相关资料,这里提供实现方法帮助大家实现这样的功能,需要的朋友可以参考下 2017-08-08 最新评论

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

您可能感兴趣的文章:

  • 基于Angular.js实现的触摸滑动动画实例代码
  • 利用angularjs1.4制作的简易滑动门效果
  • 详解angularJs中自定义directive的数据交互
  • AngularJS中的Directive自定义一个表格
  • 详解angular2采用自定义指令(Directive)方式加载jquery插件
  • Angularjs自定义指令Directive详解
  • angularjs利用directive实现移动端自定义软键盘的示例
  • Angular.js通过自定义指令directive实现滑块滑动效果
张贴在3