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. Memcache简介 & 内存分配机制

            关于这个东西里面到底应该存放数据网上一直有很多种说法,有的说sql进行md5之后作为键值,结果作为内容存放,也有人说按照业务逻辑错放,反正是炒的不亦乐乎.        本人经过将近2 ...

  2. java: Comparable比较器,定义二叉操作类

    //定义二叉操作类 class BinaryTree{ class Node{ private Node left; //左指数 private Node right; //右指数 private C ...

  3. MySQL 基础数据类型优化(如何选择数据类型)

    前言:      最近在看高性能 MySQL,记录写学习笔记:           高性能 MySQL 学习笔记(二) Schema与数据类型优化      笔记核心内容:MySQL 如何选择正确的数 ...

  4. Collection集合存储自定义对象练习

    public class Student { private String name; private int age; public Student() { super(); } public St ...

  5. nyoj-1011-So Easy[II] (多边形面积求解)

    题目链接 /* Name:nyoj-1011-So Easy[II] Copyright: Author: Date: 2018/4/26 17:12:09 Description: 将多边形,从第一 ...

  6. eclipse 环境 JUnit 测试框架(junit.framework.* 与 org.junit.*)

    如下所示,先通过 build path 导入 junit 环境依赖的 jar 包: 1. junit.framework.* junit.framework.* 主要类和函数: Test TestCa ...

  7. BZOJ - 2244 拦截导弹 (dp,CDQ分治+树状数组优化)

    题目链接 dp进阶之CDQ分治优化dp. 前置技能:dp基本功底,CDQ分治,树状数组. 问题等价于求二维最长上升子序列,是一个三维偏序问题(时间也算一维). 设$dp[i]=(l,x)$为以第i枚导 ...

  8. LeetCode 333. Largest BST Subtree

    原题链接在这里:https://leetcode.com/problems/largest-bst-subtree/ 题目: Given a binary tree, find the largest ...

  9. bootstrap排版实战

    bootstrap+angular实战 CASE-01:页面总体排版 说明:页面排版整体分为三个部分(见产品图):上导航条(红色区域).左导航条(紫色区域).内容区域(蓝色区域).左导航条的区域是由整 ...

  10. bzoj 3328 PYXFIB —— 单位根反演

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3328 单位根反演,主要用到了 \( [k|n] = \frac{1}{k} \sum\lim ...