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

太过爱你忘了你带给我的痛 2021-09-11 05:24 272阅读 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 条评论，272人围观）

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

相关阅读

相关 Scss--函数指令--使用/实例

原文网址：[Scss--函数指令--使用/实例\_IT利刃出鞘的博客-CSDN博客][Scss--_--_IT_-CSDN] 简介本文介绍Scss的函数指令的用法。

Myth丶恋晨/ 2023年09月29日 16:49/ 0 赞/ 2 阅读

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

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

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

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

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

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

相关 Angular中的内置指令

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

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

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

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

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

相关 Angular自定义指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

左手的ㄟ右手/ 2022年06月10日 02:52/ 0 赞/ 240 阅读

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

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

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

相关 Angular学习-指令入门

1.指令的定义从用户的角度来看，指令就是在应用的模板中使用的自定义HTML标签。指令可以很简单，也可以很复杂。AngularJS的HTML编译器会解析指令，增强模板的功

一时失言乱红尘/ 2022年03月27日 04:53/ 0 赞/ 197 阅读

相关 angular 自定义指令详解 Directive

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

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

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

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

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