angular指令中link函数参数实例详解

太过爱你忘了你带给我的痛 2021-09-11 05:24 243阅读 0赞

*\* html代码 \**

<!doctype html>
    <html ng-app="MyModule">
        <head>
            <meta charset="utf-8">
            <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
        </head>
        <body>
            <div ng-controller="MyCtrl">
                <greeting greet="sayHello(name)"></greeting>
    
                <greeting greet="sayHello(name)" class="testclass"></greeting>
            </div>
        </body>
        <script src="js/angular-1.3.0.js"></script>
        <script src="testtest.js"></script>
    </html>

## *\* js 代码 \** ##

var MyModule = angular.module('MyModule',[]);
    MyModule.controller('MyCtrl',function($scope){ 
      $scope.sayHello = function(name){ 
        alert("hello "+name);
      }
    });
    MyModule.directive('greeting', function () { 
      return{
        restrict:'AE',
        scope:{
          say:'&greet'
        },
        //template不操作对象，只是描述了指令标签的html内容，可以给内部的dom绑定方法
        template:'<div class="testclass" id="testid"><input class="" ng-model="input1"><br/><button ng-click="say({name:input1})">click</button><br/></div>',
        link:function(scope,ele,attr){ 
          scope.input1 = "11111111";
          scope.input2 = "2222222222";
          //ele指的是html中的指令标签的对象，可以理解成$（'directive对象'），类似jquery的选择器。
          //这里给element绑定方法或者添加clss等，只能针对整个指令dom
          ele.addClass('btn btn-primary');//对指令对象添加新的class
          ele.bind("mouseenter", function() { //对指令对象添加监听方法
            console.log(scope.input2);
          });
          console.log(attr.class);//获取指令dom上面的属性名称。输出为testclass
          console.log(attr.greet);//获取指令dom上面的属性名称。输出为sayHello(name)
          //因为通过scope传了属性值greet，所以attr上greet属性是已经存在的属性。
        }
      }
    });

--------------------

*\* 页面截图 \**  
![这里写图片描述][SouthEast]

[SouthEast]: /images/20210813/4d20e95636f74a98a6432cc685e8a703.png

发表评论取消回复

表情：

评论列表（有 0 条评论，243人围观）

还没有评论，来说两句吧...

相关阅读

相关 angular 参数映射_如何在Angular中使用查询参数

angular 参数映射介绍 (Introduction) Query parameters in Angular allow for passing optiona

爱被打了一巴掌/ 2022年11月28日 15:20/ 0 赞/ 196 阅读

相关 angular 自定义指令

1：首先获取module对象 var myAppModule = angular.module('myApp', \[\]); 2：定义指令 my.directive('

短命女/ 2022年08月25日 05:14/ 0 赞/ 177 阅读

相关 Unix学习笔记----编程实例-------Link函数的实例使用：

Link函数的实例使用：：分析： /\ 我们首先要解决几个问题： 1.什么是一个文件的硬链接？？ 2.什么是软连接？？？硬链接和软链接的区别是什么？？？ 3

刺骨的言语ヽ痛彻心扉/ 2022年08月10日 04:50/ 0 赞/ 206 阅读

相关 angular指令学习（三）--自定义指令之compile、link的学习

周一到了，哈哈哈，周末在家看了会angular，今天都已经周三了，决定整理下所学所看，主要是指令中的compile和link的学习先上个例子： <!DOCTYPE

柔光的暖阳◎/ 2022年07月12日 09:18/ 0 赞/ 182 阅读

相关 Angular中的内置指令

Angular提供了若干内置指令。因为内置指令是已经导入过的，故可以直接在组件中直接使用它们。 ngIf 如果你希望根据一个条件来决定显示或隐藏一个元素，可以使用ngI

比眉伴天荒/ 2022年06月13日 13:52/ 0 赞/ 212 阅读

相关 angularjs指令中的compile与link函数详解

通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularj

客官°小女子只卖身不卖艺/ 2022年06月11日 02:29/ 0 赞/ 154 阅读

相关 angular&创建指令&指令对象

创建指令指令也是一种服务，只是这种服务的定义有几个特殊要求：必须使用模块的directive（）方法注册服务对象工厂必须返回一个指令定义的对象

痛定思痛。/ 2022年05月24日 09:50/ 0 赞/ 172 阅读

相关 angular实例

`1.ng-app`指令标记了AngularJS脚本的作用域，在`<html>`中添加`ng-app`属性即说明整个`<html>`都是AngularJS脚本作用域。开发者也可

爱被打了一巴掌/ 2022年01月15日 04:33/ 0 赞/ 178 阅读

相关 angular 自定义指令详解 Directive

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 在angular中，Directive，自定义指令的学习

蔚落/ 2022年01月13日 18:15/ 0 赞/ 276 阅读

相关 angular指令中link函数参数实例详解

\ html代码 \ <!doctype html> <html ng-app="MyModule"> <head>

太过爱你忘了你带给我的痛/ 2021年09月11日 05:24/ 0 赞/ 244 阅读