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:/ ...
随机推荐
- 利用Swoole实现PHP+websocket直播,即使通讯代码,及linux下swoole安装基本配置
swoole安装基本配置 php安装swoole 1. 下载swoole安装 wget http://pecl.php.net/get/swoole-1.9.1.tgz tar -zxvf swool ...
- 搭建svn服务器小结
最开始是用VisualSVN-Server来搭建服务器的,某一天安装了eset杀毒软件后,发现不能用了,每次打开配置页时报错.Visualsvn server 0x80070005 百度搜索,找到相同 ...
- TCP/IP Socket 的理解
网络由下往上分为:物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. TCP 协议对应于传输层,HTTP 协议对应应用层,Socket 则是对 TCP/IP 协议的封装. ...
- Vue中mixin的用法
在项目中我们经常会遇到多个组件调用同一个方法的问题,为了避免每次都在.vue文件中定义并调用,我们可采用vue的mixin的用法: 具体使用如下: 我们需要在main.js中引入mixins文件夹下的 ...
- windows下安装 redis并开机自启动
1,redis官方下载地址:https://redis.io/download,redis 64位下载地址:https://github.com/ServiceStack/redis-windows, ...
- filter原理
index.jsp: <a href="product-input.action">input</a> <form action="prod ...
- webpack 配置简单说几句 ?
前言 这几天在准备一个单页面应用, 准备试试webpack神器,在准备webpack下的知识点,顺便记录下一些使用的心得. webpack 的配置说明 在近来的前端开发中,业务逻辑复杂化,层次多样化, ...
- CodeSmith 基本语法(二)
CodeSmith之四 - 典型实例(四) CodeSmith API文档 (三) CodeSmith 基本语法(二) CodeSmith 图形界面基本操作(一) CodeSmith的C#语法与Asp ...
- 从内存中直接运行PE程序
效果是这样的,假设一个PE数据在内存里面了,我们利用下面我讲的技术可以直接建立一个进程并运行这个PE,当然直接在本进程运行在可以,这两钟技术在前些时日我都有实现,今天我只说关于建立进程并运行的,当然, ...
- source In sight 中修改自动补全快捷键方式
点击 “options”中的“key Assi...”,找到如下 点击“Assign New Key...”之后按键盘上的指定按键就能重新设定.