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:/ ...
随机推荐
- 查看后台PHP进程(非PHP-FPM)
ps -ef | grep php | grep -v php-fpm
- VS2013打包安装(InstallShield Limited Edition for Visual Studio 2013 )
(1)百度文库安装步骤: http://wenku.baidu.com/link?url=B7NIE3gmoVx7UYUKigVGMjmINFIThpkH0DLXcYGx_9B1YzrX1QfHO2N ...
- 代码题(59)— 字符串相加、字符串相乘、打印最大n位数
1.415. 字符串相加 给定两个字符串形式的非负整数 num1 和num2 ,计算它们的和. 思路:和链表相加类似,求进位. class Solution { public: string addS ...
- 手动下载 Xcode 文档
下载Xcode文档的方法有两个: 1. 自动下载:到在Xcode的Preserences中Downloads页面的Documentation,点击对应文档的下载. 2. 手动下载:到这个页面:http ...
- ionic3 教程(一)安装和配置
// 安装(失败的话 Mac 尝试使用 sudo,Windows 尝试管理员身份运行 cmd) $ npm install -g cordova ionic // 安装后可以验证一下 ionic cl ...
- 浅谈MariaDB Galera Cluster架构
MariaDB MariaDB 是由原来 MySQL 的作者Michael Widenius创办的公司所开发的免费开源的数据库服务器,MariaDB是同一MySQL版本的二进制替代品 ...
- flash、js 函数 互相调用
js调用flex函数 flex 利用ExternalInterface.addCallback(“注册的方法名”,As中的函数名)进行注册 js中,用document.getElementById(“ ...
- SQL Sever 学习系列之三
SQL Sever 学习系列之三 SQL Server 学习系列之一(薪酬方案+基础) SQL Server 学习系列之二(日期格式问题) 五.经理今天刚谈到with的用法(with的 ...
- 在Linux上利用core dump和GDB调试segfault
时常会遇到段错误(segfault),调试非常费劲,除了单元测试和基本测试外,有些时候是在在线环境下,没有基本开发和测试工具,这就需要调试的技能.以前介绍过使用strace进行系统调试和追踪<l ...
- 机器学习:PCA(使用梯度上升法求解数据主成分 Ⅰ )
一.目标函数的梯度求解公式 PCA 降维的具体实现,转变为: 方案:梯度上升法优化效用函数,找到其最大值时对应的主成分 w : 效用函数中,向量 w 是变量: 在最终要求取降维后的数据集时,w 是参数 ...