How to watch property in attrs of directive
Q:
I have a controller that has a counter that changes from time to time.
That counter is tied to an attribute of a directive and read inside the link function of that directive.
How can I have a directive run a function each time that attr value changes?
A:
Inside your corresponding link
function: (assuming your attribute is called counter
and your scope variable is: scope
)
scope.$watch(attrs.counter, function (newTime) {
//do something with the new Time
});
Other way, surely more efficient way:
Interpolating the attribute
Inside your directive, set the scope
property as following (it will be isolated so):
scope: { counter: '@'}
The counter
would automatically be observed providing the current value as long as the link
function is called.
'@'
better than '='
here since you I suppose you don't set the counter to a new value in your directive, meaning you just read it. Indeed, =
is more useful for two-way data binding but you might not need it.
How to watch property in attrs of directive的更多相关文章
- Directive Definition Object
不知道为什么这个我并没有想翻译过来的欲望,或许我并没有都看熟透,不好误人子弟,原版奉上. Here's an example directive declared with a Directive D ...
- angular directive 深入理解
由于业务的需要,最近angular 的diretive 研究的比较多,有和同事一起共同协作开发scada的项目, 对directive 有了进一步更深的理解. 感觉才开始真正理解了这句话的意思: In ...
- AngularJS的directive(指令)配置选项说明
js代码如下: var appModule = angular.module("appModule", []); appModule.controller("Ctrl&q ...
- directive(指令里的)的compile,pre-link,post-link,link,transclude
The nitty-gritty of compile and link functions inside AngularJS directives The nitty-gritty of comp ...
- AngularJS.directive系列:嵌套directive的通讯及scope研究
一.directive中的scope directive无疑是AngularJS中比较复杂难懂的部分,而directive中个scope更是其中最复杂的部分了,尤其是在嵌套directive中互相通讯 ...
- Angular1.x directive(指令里的)的compile,pre-link,post-link,link,transclude
The nitty-gritty of compile and link functions inside AngularJS directives The nitty-gritty of comp ...
- angular中的compile和link函数
angular中的compile和link函数 前言 这篇文章,我们将通过一个实例来了解 Angular 的 directives (指令)是如何处理的.Angular 是如何在 HTML 中找到这些 ...
- Unity3D 系统宏
Platform Defines The platform defines that Unity supports for your scripts are: Property: Functi ...
- 理解angularjs的作用域
<!doctype html> <html ng-app="myApp"> <head> <script src="http:/ ...
随机推荐
- 设计高效sql一般经验谈
1不用在sql语句使用系统默认的保留关键字 2尽量用exists 和 not exists 代替 in 和 not in 这条在sql2005之后,在索引一样,统计信息一样的情况下,exists ...
- 2017-03-04 dotnet core网站发布到Linux系统中
今天开始学习dotnet core的开发,距离Visual Stuio 2017正式版的发布,也就是VS20周岁的生日还有三天,在我的电脑上安装的是VS2017 Enterprise RC版, 在VS ...
- php实现微信扫码自动登陆与注册功能
本文实例讲述了php实现微信扫码自动登陆与注册功能.分享给大家供大家参考,具体如下: 微信开发已经是现在程序员必须要掌握的一项基本的技术了,其实做过微信开发的都知道微信接口非常的强大做起来也非常的简单 ...
- PostMan使用教程(1)
Postman介绍 Postman是google开发的一款功能强大的网页调试与发送网页HTTP请求,并能运行测试用例的的Chrome插件.其主要功能包括: 模拟各种HTTP requests 从常用的 ...
- selenium webdriver如何添加cookie
一. webdriver中常用的cookie方法 webdriver中提供了操作cookie的相关方法: get_cookies() 获得cookie信息 add_c ...
- jenkins显示发送邮件成功,但未收到邮件
一. 构建的控制台输出显示日志发送成功,但是未收到邮件 今天在完成构建的时候,破天荒的发现构建的控制台输出显示日志发送成功,但QQ邮箱的确没收到邮件 15:22:40 D:\python_worksh ...
- Git_学习_09_指定某些文件不上传
一.前言 在git提交文件到远程分支时,可能有些文件我们并不想上传. 这时可以使用如下命令来将这些文件从暂存区移除 git rm --cached "文件路径" 注:git add ...
- centos6下搭建gitlab
gitlab安装方法,最新安装方法见官网:https://www.gitlab.com.cn/installation/#centos-6 1.在 Centos 6 系统上, 下面的命令将在系统防火墙 ...
- 皮肤和DLL和图片等项目文件完全整合到exe中
C#开发的程序原生界面实在是太丑了,自己又没有美化天赋,所以只能使用皮肤控件了,网上找到了IrisSkin2,包含一个.dll文件和若干ssk后缀的皮肤文件,代码其实很简单的.但是后来发现个问题,就是 ...
- J2EE分布式服务基础之RPC
一.RPC介绍 什么是RPC 远程过程调用(RPC)是一个协议,程序可以使用这个协议请求网络中另一台计算机上某程序的服务而不需知道网络细节. RPC模型 C/S模式 基于传输层协议 (例如 TCP/I ...