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:/ ...
随机推荐
- 180. Consecutive Numbers
问题描述 解决方案 select distinct l1.Num as ConsecutiveNums from Logs l1,Logs l2,Logs l3 where l1.Id+1=l2.Id ...
- EF-按字段读取
/// <summary> /// 直接获取特定一个或者多个字段的值 /// 多个字段需要声明Model /// var s= testDal.GetScalar<dynamic&g ...
- PowerCmd 2.2 注册码
PowerCmd 是共享软件,现分享注册码一枚: 用户名:Sub 注册码:PCMDA-86128-PCMDA-70594 来源:http://blog.csdn.net/subchen/article ...
- LSM树——LSM 将B+树等结构昂贵的随机IO变的更快,而代价就是读操作要处理大量的索引文件(sstable)而不是一个,另外还是一些IO被合并操作消耗。
Basic Compaction 为了保持LSM的读操作相对较快,维护并减少sstable文件的个数是很重要的,所以让我们更深入的看一下合并操作.这个过程有一点儿像一般垃圾回收算法. 当一定数量的ss ...
- js对象数组 根据某个共同字段 分组
var arr = [ {"id":"1001","name":"值1","value":" ...
- CentOS7下Tomcat启动特别慢【有效解决】
多次亲测! 很简单,记录保存一下: 编辑 $JAVA_HOME/jre/lib/security/java.security 文件, 找到 securerandom.source=file:/dev/ ...
- JS循环遍历JSON数据的方法
JSON数据如:{"options":"[{/"text/":/"王家湾/",/"value/":/" ...
- gradle_学习_01_gradle安装与基本使用
一.下载安装 1.下载地址 官方下载地址: https://gradle.org/install/#manually 下载二进制文件,解压即可 2.环境变量配置 加入以下环境变量 GRADLE_HOM ...
- Javascript-- jQuery Ajax应用
使用ajax()方法加载服务器数据 使用ajax()方法是最底层.功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下: jQuery.a ...
- 2018-2019-2 20165210《网络对抗技术》Exp6 信息搜集与漏洞扫描
2018-2019-2 20165210<网络对抗技术>Exp6 信息搜集与漏洞扫描 一.实验目标: 掌握信息搜集的最基础技能与常用工具的使用方法. 二.实验内容: 各种搜索技巧的应用 G ...