博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularJs自定义指令详解(5) - link
阅读量:5323 次
发布时间:2019-06-14

本文共 2722 字,大约阅读时间需要 9 分钟。

在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数。

写法:

link: function(scope, element, attrs) {

  // 在这里操作DOM
}

如果指令使用了require选项,那么链接函数会有第四个参数,代表控制器或者所依赖的指令的控制器。

// require 'SomeController',

link: function(scope, element, attrs, SomeController) {
  // 在这里操作DOM,可以访问required指定的控制器
}

链接函数之所以能够在指令中操作DOM,就是因为传入的这几个参数:scope、element、attrs

scope:即与指令元素相关联的当前作用域,可以用来注册监听器:scope.$watch()

element:即当前指令对应的元素,使用它可以操作该元素及其子元素。例如<span my-directive></span>,这个span就是指令 my-directive所使用的元素。

attrs:由当前元素的属性组成的对象。

下面看一个例子,来自官方文档的示例。

我们要实现一个时钟,根据给定的时间格式显示当前的时间,而且每隔一秒要更新一次时间。

首先在控制器中初始化一个时间格式:

controller('Controller', ['$scope', function($scope) {

    $scope.format = 'M/d/yy h:mm:ss a';
}])

对于时间格式,显然我们要引入$filter服务。

对于”每隔一秒“进行某些操作,显然要引入$interval服务。

为了测试程序,我们还引入$log服务以便在浏览器中观察输出。

所以自定义的指令需要写成这样:

directive('myClock', ['$interval', '$filter', '$log', function($interval, $filter,$log)

这个myClock指令将会被注入$interval、$filter、$log服务。

刷新时间显示,也就是要求我们在指令中操作DOM,输出时间:

function updateTime() {

  element.text($filter('date')(new Date(), interFormat));
}

$filter方法的使用:

$filter('date')(date, format, timezone)

参考

每隔一秒刷新显示:

$interval(

  function() {

    updateTime();
  },

  1000

);

完整代码如下:

    
时间格式:

当前时间:

运行效果:

不过我们很快就发现一个问题,就是修改时间格式后,无法立刻刷新时间显示,把每隔一秒修改为每隔五秒,问题就更加明显了。

虽然修改format会因为双向绑定而使myFormat发生变化,但是后者并不会触发执行updateTime()函数。

所以需要加入$watch监听:

    
时间格式:

当前时间:

注意$watch()的第一个参数为'myFormat',不要少了单引号,也不要写成'scope.myFormat'、'$scope.myFormat',要不然newValue的值是undefined了。

还有就是删掉了外面的updateTime()调用,因为在$watch里myFormat第一次绑定时,已经触发监听器的回调函数了,于是updateTime()也立刻执行。

上面的代码监听的是定义在指令的隔离作用域上的myFormat,而官方文档监听的是DOM中span元素的my-format属性,效果是差不多的,代码如下:

    
时间格式:

Current time is:

官方文档指出一个问题:$interval注册的匿名函数不会在元素被移除时自动释放,存在一定的内存泄露风险,所以增加了代码:

element.on('$destroy', function() {

  $interval.cancel(timeoutId);
});

这三行代码也演示了如何在指令内加入对元素的事件监听器,官方文档还提供了另一个例子,代码如下:

    
Drag ME

 现在回顾一下前面文章提到的隔离作用域问题,看看以下代码:

    
1,Hello {
{greeting}}!

2,

输出:

1,Hello AngularJs!


2,Hello AngularJs!

虽然greeting被初始化为'World',但是在链接函数里修改成'AngularJs’,可见此时传给链接函数的scope是上一级作用域(在这里是rootScope)

这造成了污染,一般情况下我们不希望指令不声不响地修改外面的变量,解决办法是把代码里//scope:{}的注释去掉,隔离指令的作用域。

于是输出就会变成:

1,Hello World!


2,Hello AngularJs!

 

再看下面的代码:

    
1,Hello {
{greeting}}!

2,
Hello {
{greeting}}!

输出:

1,Hello World!


2,Hello World!

即使ng-transclude指令放在指令定义的模板中,但是{

{greeting}}绑定放在外面,而指令已经隔离了作用域,所以{
{greeting}}使用的是外面的'World'。

如果注释掉scope:{},指令的作用域没有隔离,于是输出就变为:

1,Hello AngularJs!


2,Hello AngularJs!

 

转载于:https://www.cnblogs.com/minghui007/p/7160439.html

你可能感兴趣的文章
移动设备和SharePoint 2013 - 第3部分:推送通知
查看>>
SOPC Builder中SystemID
查看>>
MySQL数据库备份工具mysqldump的使用(转)
查看>>
NTP服务器配置
查看>>
关于 linux 的 limit 的设置
查看>>
HDU(4528),BFS,2013腾讯编程马拉松初赛第五场(3月25日)
查看>>
vim中文帮助教程
查看>>
MySQL基础3
查看>>
RxJS & Angular
查看>>
面向对象(多异常的声明与处理)
查看>>
MTK笔记
查看>>
ERROR: duplicate key value violates unique constraint "xxx"
查看>>
激活office 365 的启动文件
查看>>
无法根据中文查找
查看>>
[简讯]phpMyAdmin项目已迁移至GitHub
查看>>
转载 python多重继承C3算法
查看>>
【题解】 bzoj1597: [Usaco2008 Mar]土地购买 (动态规划+斜率优化)
查看>>
css文本溢出显示省略号
查看>>
git安装和简单配置
查看>>
面向对象:反射,双下方法
查看>>