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:/ ...
随机推荐
- 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 ...
- poj 2395 bfs/记录路径
http://poj.org/problem?id=2935 Basic Wall Maze Time Limit: 1000MS Memory Limit: 65536K Total Submi ...
- Install nginx on ubuntu
1. Install libpcre3, libpcre3-dev2. Install zlib1g-dev3. Download nginx and unzip it4. ./configure5. ...
- 条款39:明智的使用private继承
首先看一下private继承的法则:class之间的继承关系如果是private的话,那么编译器不会将一个derived对象自动当作为一个base class对象. 从base class继承而来的所 ...
- @angular/cli项目构建--interceptor
JWTInterceptor import {Injectable} from '@angular/core'; import {HttpEvent, HttpHandler, HttpInterce ...
- 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 ...
- HDU - 5126 stars (CDQ分治)
题目链接 题目大意:一共有Q(1<=Q<=50000)组操作,操作分为两种: 1.在x,y,z处添加一颗星星 2.询问以(x1,y1,z1)与(x2,y2,z2)为左上和右下顶点的矩形之间 ...
- 前端项目使用module.exports文件一定要Webpack编译吗?请问gulp可以编译这种文件吗
import引入类似这种文件,一定要用webpack去编译吗 module.pxports 是CMD规范的一个全局函数,功能是当前模块对外提供接口.require可以直接使用这个接口.例子: echo ...
- curl获取图片
<?php set_time_limit(0); //执行30秒超时后继续执行 header("Content-type:text/html;charset=utf-8"); ...
- Word 2007 如何设置正文第一页----目录显示正文从第一页开始
最近学校里开始要求写论文了,其中有个目录中的页码都不是从第一页开始的,毕竟前面还有封面.中英文摘要.目录等,所以正文内容就不是从第一页开始的了,但是很多的书上所有正文都是从第一页开始的,我的论文如何才 ...