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的更多相关文章

  1. Directive Definition Object

    不知道为什么这个我并没有想翻译过来的欲望,或许我并没有都看熟透,不好误人子弟,原版奉上. Here's an example directive declared with a Directive D ...

  2. angular directive 深入理解

    由于业务的需要,最近angular 的diretive 研究的比较多,有和同事一起共同协作开发scada的项目, 对directive 有了进一步更深的理解. 感觉才开始真正理解了这句话的意思: In ...

  3. AngularJS的directive(指令)配置选项说明

    js代码如下: var appModule = angular.module("appModule", []); appModule.controller("Ctrl&q ...

  4. directive(指令里的)的compile,pre-link,post-link,link,transclude

    The nitty-gritty of compile and link functions inside AngularJS directives  The nitty-gritty of comp ...

  5. AngularJS.directive系列:嵌套directive的通讯及scope研究

    一.directive中的scope directive无疑是AngularJS中比较复杂难懂的部分,而directive中个scope更是其中最复杂的部分了,尤其是在嵌套directive中互相通讯 ...

  6. 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 ...

  7. angular中的compile和link函数

    angular中的compile和link函数 前言 这篇文章,我们将通过一个实例来了解 Angular 的 directives (指令)是如何处理的.Angular 是如何在 HTML 中找到这些 ...

  8. Unity3D 系统宏

    Platform Defines The platform defines that Unity supports for your scripts are:     Property: Functi ...

  9. 理解angularjs的作用域

    <!doctype html> <html ng-app="myApp"> <head> <script src="http:/ ...

随机推荐

  1. 查看后台PHP进程(非PHP-FPM)

    ps -ef | grep php | grep -v php-fpm

  2. VS2013打包安装(InstallShield Limited Edition for Visual Studio 2013 )

    (1)百度文库安装步骤: http://wenku.baidu.com/link?url=B7NIE3gmoVx7UYUKigVGMjmINFIThpkH0DLXcYGx_9B1YzrX1QfHO2N ...

  3. 代码题(59)— 字符串相加、字符串相乘、打印最大n位数

    1.415. 字符串相加 给定两个字符串形式的非负整数 num1 和num2 ,计算它们的和. 思路:和链表相加类似,求进位. class Solution { public: string addS ...

  4. 手动下载 Xcode 文档

    下载Xcode文档的方法有两个: 1. 自动下载:到在Xcode的Preserences中Downloads页面的Documentation,点击对应文档的下载. 2. 手动下载:到这个页面:http ...

  5. ionic3 教程(一)安装和配置

    // 安装(失败的话 Mac 尝试使用 sudo,Windows 尝试管理员身份运行 cmd) $ npm install -g cordova ionic // 安装后可以验证一下 ionic cl ...

  6. 浅谈MariaDB Galera Cluster架构

    MariaDB          MariaDB 是由原来 MySQL 的作者Michael Widenius创办的公司所开发的免费开源的数据库服务器,MariaDB是同一MySQL版本的二进制替代品 ...

  7. flash、js 函数 互相调用

    js调用flex函数 flex 利用ExternalInterface.addCallback(“注册的方法名”,As中的函数名)进行注册 js中,用document.getElementById(“ ...

  8. SQL Sever 学习系列之三

    SQL Sever 学习系列之三 SQL Server 学习系列之一(薪酬方案+基础) SQL Server 学习系列之二(日期格式问题)         五.经理今天刚谈到with的用法(with的 ...

  9. 在Linux上利用core dump和GDB调试segfault

    时常会遇到段错误(segfault),调试非常费劲,除了单元测试和基本测试外,有些时候是在在线环境下,没有基本开发和测试工具,这就需要调试的技能.以前介绍过使用strace进行系统调试和追踪<l ...

  10. 机器学习:PCA(使用梯度上升法求解数据主成分 Ⅰ )

    一.目标函数的梯度求解公式 PCA 降维的具体实现,转变为: 方案:梯度上升法优化效用函数,找到其最大值时对应的主成分 w : 效用函数中,向量 w 是变量: 在最终要求取降维后的数据集时,w 是参数 ...