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:/ ...
随机推荐
- python基础6 - while 循环与转义字符
8. while 循环基本使用 8.1 while 语句基本语法 初始条件设置 —— 通常是重复执行的 计数器 while 条件(判断 计数器 是否达到 目标次数): 条件满足时,做的事情1 条件满足 ...
- 深入剖析Redis主从复制
[http://sofar.blog.51cto.com/353572/1413024/] [Redis 主从复制的内部协议和机制] 一.主从概述 Redis 支持 Master-Slave( ...
- 导入工程“The import android cannot be resolved”错误
project - Properties - android 1.Project Build Target 勾选响应的SDK 2.default.properties文件,把target = andr ...
- Java中常见的比较器的实现方法
在Java中经常会涉及到对象数组的排序问题,那么就涉及到对象之间的比较问题. 通常对象之间的比较可以从两个方面去看: 第一个方面:对象的地址是否一样,也就是是否引用自同一个对象.这种方式可以直接使用& ...
- python向数据库插入中文乱码问题
1.python向数据库插入中文乱码问题 直接手动insert into 中文 不乱码,但是用程序跑起来就乱码. conn =MySQLdb.connect(host="127.0.0.1& ...
- poj-1426-Find The Multiple(打表水过)
思路: 2的最近可以整除的数是10 所以,很关键的一点,只要是偶数,例如: 6:2*3,可以拆分为能够被2整除和能够被3整除的乘积,所以,10*111=1110 144:72*2,8*9*2,2*2* ...
- 在ios7中使用zxing
ZXing(Github镜像地址)是一个开源的条码生成和扫描库(开源协议为Apache2.0).它不但支持众多的条码格式,而且有各种语言的实现版本,它支持的语言包括:Java, C++, C#, Ob ...
- PHP中不用第三个变量交换两个变量的值
相信大家在PHP面试或者学习中经常会遇到这个问题就是“不用第三个变量来交换两个变量的值”,今天正对这个问题来讨论一下: 第一种方法:首先会想到的 这种方法简单可行,顺利的交换了两个变量的值. 第二种方 ...
- [BZOJ5249][多省联测2018]IIIDX
bzoj luogu sol 首先可以把依赖关系转成一个森林.自下而上维护出每个点的\(size\),表示这关解锁以后一共有多少关. 考虑没有重复数字的情况. 直接从小往大贪心把每个数赋给当前已解锁的 ...
- LeetCode Construct String from Binary Tree
原题链接在这里:https://leetcode.com/problems/construct-string-from-binary-tree/#/description 题目: You need t ...