angular directive scope
angular directive scope
1.当directive 中不指定scope属性,则该directive 直接使用 app 的scope;
2.当directive 中指定scope属性时,scope作用域有3种方式:
2.1 . = : 代表数据双向绑定,只要该属性发生改变 ,app(即父作用域) 中scope对应的值和 directive中对应的值将同时发生改变 ;
2.2 . @ : 代表数据单向绑定,该值的改变只会影响directive ,不会影响app(即父作用域) 其他值, 也就是孤立作用域 ;
2.3 . & :代表继承或者使用父作用域中scope绑定的方法。
下面用一个demo 来说明:
example:
directive html:
<gmb-per say="myalert()" abc="gmbPerNotification_d">gmb-per</gmb-per>
coffee directive code :
# module
angular.module('demo',[])
.controller 'myCtrl',($scope)->
$scope.gmbPerNotification_d = [1,2,3]
$scope.myalert = ->
alert(11)
#directive
pushNotificationApp.directive 'gmbPer',($timeout,$compile) ->
restrict: 'AE'
#terminal : true
transclude : true
#replace : true
template:'<div class="col-lg-4 chartWrap" ng-click="say()" ng-repeat="perN in abc">121212</div>'
#replace : true
scope:
abc : '='
gmbPerNotification_d : '='
say : '&'
controller : ($scope) -> #$scope.mytest = [1,2] link : (scope, element, attrs) -> console.log
angular directive scope的更多相关文章
- angular之scope详解
AngularJS的一些指令会创建子作用域,而子作用域会继承自父作用域,大致可分为以下3种 1.创建子作用域并继承父作用域的指令 ng-repeat ng-include ng-switch ng-c ...
- angular directive 深入理解
由于业务的需要,最近angular 的diretive 研究的比较多,有和同事一起共同协作开发scada的项目, 对directive 有了进一步更深的理解. 感觉才开始真正理解了这句话的意思: In ...
- ANGULARJS: UNDERSTANDING DIRECTIVE SCOPE
https://www.3pillarglobal.com/insights/angularjs-understanding-directive-scope --------------------- ...
- angularjs中的directive scope配置
angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...
- angular之scope.$watch
某“大神”挖了个陨石坑,我于是乎似懂非懂的接手,玩了一个月angular.现在项目告一段落,暂别了繁重的重复性工作,可以开始回顾.认真的折腾下之前犹抱琵琶的angular. angular吸引人的特性 ...
- 38.angular的scope作用域
转自:https://www.cnblogs.com/best/tag/Angular/ 1. Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. S ...
- Angular自定义指令directive:scope属性
在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...
- Angular之 Scope和 Directive
---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...
- Angular中directive——scope选项与绑定策略,这个也经常迷惑的。
开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细 ...
随机推荐
- php闭包实现函数的自调用,也是递归
php的闭包可能不常用,但是在某些场合之下还是可以考虑用php的闭包来实现某些功能的,比如递归,这里讲一下用php的闭包实现递归 //php闭包实现函数的自调用,也就是实现递归 function cl ...
- oracle deterministic 关键字
多次看到DETERMINISTIC,一直很疑惑,今天做了一个实验.我们欺骗Oracle说是一个DETERMINISTIC函数,它在SQL中只调用一次.如果不使用DETERMINISTIC,可以看到出来 ...
- Bibtex使用方法
BibTeX 是一个使用数据库的的方式来管理参考文献程序, 用于协调LaTeX的参考文献处理. BibTeX 文件的后缀名为 .bib . 先来看一个例子: @article{Gettys90,aut ...
- 。。。在学习新框架Spring MVC的感受。。。
已经学习一遍Spring MVC了,感觉还是懵懵懂懂的,特别是重定向,路径,参数的这些问题,心好乱,不过,这,都不是问题!!! 继续努力,努力到会为止!!!加油!!!
- Thinking in UML-2-建模基础
建模的问题可以分为两个: 怎么建 模是什么 怎么建:角度不同决定了建模方向不同.所以首先要决定抽象的角度即建立这个模型的目的是什么. 模是什么:人+事+物+规则 我们这样来建立模型: 问题领域 = n ...
- POJ - 1978 Hanafuda Shuffle
最初给牌编号时,编号的顺序是从下到上:洗牌时,认牌的顺序是从上到下.注意使用循环是尽量统一“i”的初始化值,都为“0”或者都为“1”,限界条件统一使用“<”或者“<=”. POJ - 19 ...
- ASP.NET WEBAPI 简单CURD综合测试(asp.net MVC,json.net,sql基础存储过程和视图,sqlhelper,json解析)
草图 真正的后端是不管前端是什么平台,用什么语言的,JSON格式的数据应该可以应对.用ASP.NET WEBAPI尝试做一个后端,实现最基本的CURD,业务逻辑和数据库操作都放在后端,前端只需要正 ...
- checkbox的单选全选,反选,计算价格,删除
activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...
- create thread的时候发生core dump
#include <stdio.h> #include <unistd.h> #include <stdlib.h> #include <pthread.h& ...
- Deferred解决JS同步问题
测试脚本: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...