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. The tag handler class for "home.jsp" (org.apache.taglibs.standard.tag.rt.core.ForEachTag) was not found on the Java Build Path

    web.xml中 listener,filter,servlet需按顺序. <listener> <listener-class>listener.VisitCountList ...

  2. poj 2395 bfs/记录路径

    http://poj.org/problem?id=2935 Basic Wall Maze Time Limit: 1000MS   Memory Limit: 65536K Total Submi ...

  3. Install nginx on ubuntu

    1. Install libpcre3, libpcre3-dev2. Install zlib1g-dev3. Download nginx and unzip it4. ./configure5. ...

  4. 条款39:明智的使用private继承

    首先看一下private继承的法则:class之间的继承关系如果是private的话,那么编译器不会将一个derived对象自动当作为一个base class对象. 从base class继承而来的所 ...

  5. @angular/cli项目构建--interceptor

    JWTInterceptor import {Injectable} from '@angular/core'; import {HttpEvent, HttpHandler, HttpInterce ...

  6. codeforces D. Area of Two Circles' Intersection 计算几何

    D. Area of Two Circles' Intersection time limit per test 2 seconds memory limit per test 256 megabyt ...

  7. HDU - 5126 stars (CDQ分治)

    题目链接 题目大意:一共有Q(1<=Q<=50000)组操作,操作分为两种: 1.在x,y,z处添加一颗星星 2.询问以(x1,y1,z1)与(x2,y2,z2)为左上和右下顶点的矩形之间 ...

  8. 前端项目使用module.exports文件一定要Webpack编译吗?请问gulp可以编译这种文件吗

    import引入类似这种文件,一定要用webpack去编译吗 module.pxports 是CMD规范的一个全局函数,功能是当前模块对外提供接口.require可以直接使用这个接口.例子: echo ...

  9. curl获取图片

    <?php set_time_limit(0); //执行30秒超时后继续执行 header("Content-type:text/html;charset=utf-8"); ...

  10. Word 2007 如何设置正文第一页----目录显示正文从第一页开始

    最近学校里开始要求写论文了,其中有个目录中的页码都不是从第一页开始的,毕竟前面还有封面.中英文摘要.目录等,所以正文内容就不是从第一页开始的了,但是很多的书上所有正文都是从第一页开始的,我的论文如何才 ...