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. 180. Consecutive Numbers

    问题描述 解决方案 select distinct l1.Num as ConsecutiveNums from Logs l1,Logs l2,Logs l3 where l1.Id+1=l2.Id ...

  2. EF-按字段读取

    /// <summary> /// 直接获取特定一个或者多个字段的值 /// 多个字段需要声明Model /// var s= testDal.GetScalar<dynamic&g ...

  3. PowerCmd 2.2 注册码

    PowerCmd 是共享软件,现分享注册码一枚: 用户名:Sub 注册码:PCMDA-86128-PCMDA-70594 来源:http://blog.csdn.net/subchen/article ...

  4. LSM树——LSM 将B+树等结构昂贵的随机IO变的更快,而代价就是读操作要处理大量的索引文件(sstable)而不是一个,另外还是一些IO被合并操作消耗。

    Basic Compaction 为了保持LSM的读操作相对较快,维护并减少sstable文件的个数是很重要的,所以让我们更深入的看一下合并操作.这个过程有一点儿像一般垃圾回收算法. 当一定数量的ss ...

  5. js对象数组 根据某个共同字段 分组

    var arr = [ {"id":"1001","name":"值1","value":" ...

  6. CentOS7下Tomcat启动特别慢【有效解决】

    多次亲测! 很简单,记录保存一下: 编辑 $JAVA_HOME/jre/lib/security/java.security 文件, 找到 securerandom.source=file:/dev/ ...

  7. JS循环遍历JSON数据的方法

    JSON数据如:{"options":"[{/"text/":/"王家湾/",/"value/":/" ...

  8. gradle_学习_01_gradle安装与基本使用

    一.下载安装 1.下载地址 官方下载地址: https://gradle.org/install/#manually 下载二进制文件,解压即可 2.环境变量配置 加入以下环境变量 GRADLE_HOM ...

  9. Javascript-- jQuery Ajax应用

    使用ajax()方法加载服务器数据 使用ajax()方法是最底层.功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下: jQuery.a ...

  10. 2018-2019-2 20165210《网络对抗技术》Exp6 信息搜集与漏洞扫描

    2018-2019-2 20165210<网络对抗技术>Exp6 信息搜集与漏洞扫描 一.实验目标: 掌握信息搜集的最基础技能与常用工具的使用方法. 二.实验内容: 各种搜索技巧的应用 G ...