angular学习笔记(三十)-指令(5)-link

这篇主要介绍angular指令中的link属性:

link:function(scope,iEle,iAttrs,ctrl,linker){

....

}

link属性值为一个函数,这个函数有五个参数:scope,iEle,iAttrs,ctrl,linker

scope:指令所在的作用域,这个scope和指令定义的scope是一致的.至于指令的scope,会在讲解scope属性的时候详细解释

iEle:指令元素的jqLite封装.(也就是说iEle可以调用angular封装的简版jq的方法和属性.)

iAttrs:指令元素的属性的集合

ctrl:需要和require属性一起使用,用于调用其他指令的方法,指令之间的互相通信,这个在讲require属性的时候会详细解释

linker:也就是angular学习笔记(三十)-指令(4)-transclude文章最后说到的transclude()函数,可以用于得到指令中需要被嵌入的那一坨内容.详见:angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

link函数主要用于操作dom元素,给dom元素绑定事件和监听.下面举个的例子:

一段文字,它的背景色根据输入的色值同步改变,当点击文字的时候,重置背景色

输入pink→点击code_bunny→

下面来看代码:

html:

复制代码
<!DOCTYPE html>
<html ng-app="dirAppModule">
<head>
  <title>20.6指令</title>
  <meta charset="utf-8">
  <script src="../angular.js"></script>
  <script type="text/ng-template" id="text.html">
    <div>
      <h3 style="background-color:{{color}}" ng-transclude></h3>
    </div>
  </script>
  <script src="script.js"></script>

  <style type="text/css">
    h3 {
      color:#CB2027
    }
  </style>
</head>
<body>
  <div ng-controller="bgColor">
    <input ng-model="color" placeholder="请输入颜色值"/>
    <br/>
    <cd-hello name="bunny"><span>code_bunny</span></cd-hello>
  </div>
</body>
</html>
复制代码

js:

复制代码
var appModule = angular.module('dirAppModule', []);
appModule.controller('bgColor',function($scope){});
appModule.directive('cdHello',function(){
    return {
        restrict:'EAC',
        templateUrl:'text.html',
        replace:true,
        transclude:'element',
        link:function(scope,ele,attrs,ctrl,trans){
            ele.bind('click',function(){
                scope.$apply(function(){
                    scope.color = '#C0DCC0'
                })
            });
            ele.bind('mouseover',function(){
                ele.css({'cursor':'pointer'})
            });
        }
    }
});
复制代码

详细讲解:

1.scope: 这里由于指令中并没有定义scope属性,所以默认就是父scope.也就是bgColor控制器的$scope,所以他们是同步的,外层的color值修改了,指令的color也变了,指令的color值修改了,外层的color值也变了.这会在后面讲解scope的时候详细讲解.

2.ele: 指令元素的jqLite包装.cdHello指令元素会被替换成<div><h3 style="background-color:{{color}}" ng-transclude></h3></div>,所以,这里的ele就是div的jqLite包装,包装过后的元素就可以调用基本的jq的方法,比如这里的.bind(),.css()...用法和jq是一致的.

3.scope.$apply(function(){}): scope的$apply方法会在里面的函数被执行后重新渲染视图.

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

完整代码:

 

posted @   诗&远方  阅读(6586)  评论(6)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
AI IDE Trae