铁雪资源网 Design By www.gsvan.com

本文实例讲述了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="/UploadFiles/2021-04-02/angular.min.js">

二、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,自定义指令,attribute,继承

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

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

暂无Angularjs使用directive自定义指令实现attribute继承的方法详解的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?