AngularJs的directive指令的link属性详解

最新推荐文章于 2021-12-28 22:46:13 发布
最新推荐文章于 2021-12-28 22:46:13 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： angularJS 文章标签： angularJs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dome_/article/details/79277522
版权

在AngularJs中不能直接使用JQuery去选择dom元素，它在指令directive中提供了link属性来让开发者操作dom，具体代码如下：

01<!DOCTYPE html>
02<html lang="en">
03<head>
04    <meta charset="UTF-8">
05    <title>Document</title>
06</head>
07<body ng-app="app">
08    <zym-blog title="赵一鸣AngularJs学习笔记" fontsize="30px" fontcolor="#f00"></zym-blog>
09</body>
10</html>
11<script type="text/javascript" src="http://www.zymseo.com/js/demo.js"></script>
12<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
13<script type="text/javascript">
14    var m = angular.module('app', []);
15    m.directive('zymBlog', [function(){
16        return {
17            restrict : 'E',
18            scope : {
19                'title' : '@title',
20                'fontsize' : '@fontsize',
21                'fontcolor' : '@fontcolor'
22            },
23            link : function(scope, element, attr){
24                console.log(scope);
25                console.log(attr);
26                //$(element).text(scope.title).css({'color': scope.fontcolor, 'fontSize': scope.fontsize});
27                $(element).text(attr.title).css({'color': attr.fontcolor, 'fontSize': attr.fontsize});
28            }
29        }
30    }]);
31</script>

link属性中，注释的那部分与没有注释的那部分，最后在浏览器中实现的效果是一样的！

K'illCode
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Angularjs自定义指令Directive详解
11-26
在AngularJS中，自定义指令（Directive）是一个强大的特性，允许开发者扩展HTML的功能，创建新的DOM元素或修改已有元素的行为。在本例中，我们将详细探讨如何创建一个自定义指令来验证用户输入的账号是否为管理员...
AngularJs directive详解及示例代码
10-21
指令通过在HTML元素、属性、类或注释中声明，从而在页面加载时被AngularJS的编译器识别和执行。 1. **指令的命名规范** AngularJS 指令的命名通常遵循驼峰式或蛇底式规则。例如，`ngBind` 和 `ng-bind` 都是合法的...
angularjs指令中的compile与link函数详解（转）
weixin_34345753的博客
06-17 275
http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文...
AngularJs自定义指令详解（5） - link
weixin_34348805的博客
08-21 252
在指令中操作DOM，我们需要link参数，这参数要求声明一个函数，称之为链接函数。 写法： link: function(scope, element, attrs){ //在这里操作DOM } 如果指令使用了require选项，那么链接函数会有第四个参数，代表控制器或者所依赖的指令的控制器。 // require 'meController'...
AngularJs directive-link实例
天马3798
06-09 825
1.代码： 中间内容部分 --> var app = angular.module('myApp', []); app.directive('myExpander', function () { return { restrict: 'E', replac
angularjs directive link 属性 问题
yzbben的博客
10-06 2197
angular.module('docsTransclusionExample', []) .controller('Controller', ['$scope', function($scope) { $scope.name = 'Tobias'; }]) .directive('myDialog', function() { return { restrict: 'E',
angularJs-directive（scope、require、link）应用
iteye_9648的博客
07-30 326
断续续学习，待到完全沉淀后再慢悠悠的做好记录。   这篇是angularJs中的directive，本文主要研究directive中的require、link、scope，不涉及基本属性。目录如下：    内置指令    自定义指令    指令实例    属性解释    编译过程   （一）内置指令   在angularJs应用中，到处可见指令(内置)。如：ng-app(标...
AngularJS指令用法详解
10-21
在AngularJS中，指令可以用来创建可重用的组件，增加数据绑定、事件处理以及DOM操作等功能。 指令的四种形式： 1. **新HTML元素**：如`<date-picker></date-picker>`，创建一个完整的自定义组件。 2. **元素属性**...
AngularJS创建自定义指令的方法详解
11-29
3. 定义行为：在 `link` 函数中，可以访问到作用域 (`scope`)、指令元素 (`element`) 和属性 (`attrs`)，从而进行DOM操作、事件监听等。 4. 自定义属性：可以设置指令的 `scope`、`template`、`transclude` 等选项...
angular.js中指令compile与link原理剖析
03-23 185
在angularJs应用启动之前，它们是以HTML文本形式存在文本编辑器当中。应用启动会进行编译和链接，作用域会同HTML进行绑定。这个过程包含了两个阶段！ 编译阶段 　　在编译的阶段，angularJs会遍历整个的文档并根据JavaScript中指令定义来处理页面上什么的指令。在遍历的过程中，有可能一层套着一层，一直延深处遍历。一但遍历和编译完毕就会返回一个叫做模板函数的函数。在这...
angular之Directive - Compile vs. Link
LuckySummer*
08-03 617
还是先从栗子们看起~ 如果我想实现这样一个功能，当一个input失去光标焦点时(blur)，执行一些语句，比如当输入用户名后，向后台发ajax请求查询用户名是否已经存在，好有及时的页面相应。 输入 hellobug  失去焦点后提示 hellobug 这个用户名已经存在  代码如下： HTML 1 2 3 4 5 6 ng-controller
angular的directive指令的link方法
现在学习也不晚
11-16 9957
//link函数主要用于操作dom元素,给dom元素绑定事件和监听. link:function(scope,element,attr,ctrl,linker){ //scope:指令所在的作用域 //element：指令元素的封装，可以调用angular封装的简装jq方法和属性 //attr：指令元素的属性的集合 //ctrl：用于调用其他指令的方法,指令之间的互相通信使用，需要配合re
AngularJS之指令中controller与link
sixteen_cicle的博客
09-07 586
1.在指令中存在controller和link属性的疑问 那么，开始第一次尝试，写一个指令吧 结论：基础是非常重要的 考虑指令的命名，和在页面的显示 指令的组成 2.指令中的controller和link都可以实现同样的效果，那在指令中放这两个属性干嘛？   我们的代码到底是放在controller还是link中？ 解决问题： 我们首先来看看当二者一起使用时，呈现结果的顺序即在编译
AngularJs 自定义指令link操作dom
weixin_43294560的博客
01-20 797
1.指令方案link 描述：指令方案link是angularJS中提供给自定义指令的一种“专有行为” 操作自定义指令所在范围,包括子元素dom 语法：app.directive('指令名称', function (){ ... ... link:function (scope, element, attrs){...} }); ...
AngularJS创建新指令 - 函数功能
weixin_30332705的博客
10-26 129
首先先介绍下AngularJS指令下的几种函数 Link函数和Scope 指令生成出的模板其实没有太多意义，除非它在特定的scope下编译。默认情况下，指令并不会创建新的子scope。更多的，它使用父scope。也就是说，如果指令存在于一个controller下，它就会使用这个controller的scope。 如何运用scope，我们要用到一个叫做 link 的函数。它由指令定义对...
angularjs指令compile、link
火星男孩的分享空间
02-23 821
link的值是一个函数，用来定义指令的行为。从传入的参数中可以获取到当前元素。编译三阶段： 1. 标准浏览器API转化 将html转化成dom，所以自定义的html标签必须符合html的格式 2. Angular compile 搜索匹配directive，按照priority排序，并执行directive上的compile方法 3. Angular link 执行directive上的
directive之link
youhebuke225的博客
12-28 188
作用 link函数的作用与controller差不多，同样可以像controller中一样绑定绑定事件和属性，甚至参数也是参数多的，他一共有四个参数，前三个参数与controller相同，这里说一下第四个参数 如果当前的指令有require，那么第四个参数就是require引用的作用域 如果当前的指令没有require，那么第四个参数就是当前的controller 本身 而在controller上面添加到this上面的属性和方法就可以通过第四个参数访问 代码 代码 <!DOCTYPE htm
angularjs compine和link的区别
anwu850704的博客
09-17 276
[译]ng指令中的compile与link函数解析 04 September 2014 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web compon...
angular 指令渲染_angularjs directive指令 link在渲染完成之后执行
weixin_42360967的博客
01-17 159
在一个自定义指令中export default class {/*@ngInject*/constructor() {thi.restrict = 'E';this.scope = {ngSrc: '@'};this.template = `}link(scope, element, attrs, ngModelController) {scope.id = 'flow-player-' + Ma...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值