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的更多相关文章

  1. angular之scope详解

    AngularJS的一些指令会创建子作用域,而子作用域会继承自父作用域,大致可分为以下3种 1.创建子作用域并继承父作用域的指令 ng-repeat ng-include ng-switch ng-c ...

  2. angular directive 深入理解

    由于业务的需要,最近angular 的diretive 研究的比较多,有和同事一起共同协作开发scada的项目, 对directive 有了进一步更深的理解. 感觉才开始真正理解了这句话的意思: In ...

  3. ANGULARJS: UNDERSTANDING DIRECTIVE SCOPE

    https://www.3pillarglobal.com/insights/angularjs-understanding-directive-scope --------------------- ...

  4. angularjs中的directive scope配置

    angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...

  5. angular之scope.$watch

    某“大神”挖了个陨石坑,我于是乎似懂非懂的接手,玩了一个月angular.现在项目告一段落,暂别了繁重的重复性工作,可以开始回顾.认真的折腾下之前犹抱琵琶的angular. angular吸引人的特性 ...

  6. 38.angular的scope作用域

    转自:https://www.cnblogs.com/best/tag/Angular/ 1. Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. S ...

  7. Angular自定义指令directive:scope属性

    在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...

  8. Angular之 Scope和 Directive

    ---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...

  9. Angular中directive——scope选项与绑定策略,这个也经常迷惑的。

    开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细 ...

随机推荐

  1. Bootstrap《第一篇》,关于container、jumbotron、row、col、text-center等的学习

    一.关于引入bootstrap文件 <!-- 为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签. --> <meta name= ...

  2. js中eval() 方法的使用以及一些特殊的使用方式

    1.eval方法只能在非严格模式中进行使用,在use strict中是不允许使用这个方法的. 2.eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值 ...

  3. AD6电气规则错误报告中英文对照

    Ⅰ:Error Reporting 错误报告 A:Violations Associated with Buses 有关总线电气错误的各类型(共 12 项) ◆ bus indices out of  ...

  4. wpa gui

    wpa gui是wpa_supplicant的ui工具. wpa_supplicant源码中包含了wpa_gui, 在目录wpa_gui-qt4中. 先运行wpa supplicant,再运行wpa ...

  5. VMware简介

    VMware(中文名威睿”) 虚拟机软件,是全球桌面到数据中心虚拟化解决方案的领导厂商.VMware vSphere 是VMware 的一个虚拟化产品,它包括vCenter,ESX Server,ES ...

  6. 转:"在已损坏了程序内部状态的XXX.exe 中发生了缓冲区溢出"的一种可能原因

    我的问题跟原作者的问题差不多.头文件和DLL不匹配导致的. 原文链接:http://blog.csdn.net/u012494876/article/details/39030887 今天软件突然出现 ...

  7. 【转】PHP实现连贯操作

    [第一种方案 __call] 我们在使用一些框架(如ThinkPHP)编码的时候,常用到这样的代码. M('User')->where(array('id'=>1))->field( ...

  8. Access项目文件的版本控制

    简单记录一下使用MS Access SVN(以下简称AccessSVN)的步骤吧. AccessSVN在http://accesssvn.codeplex.com/,该产品的目的是:Access SV ...

  9. openssl 证书操作命令

    生成Self Signed证书 # 生成一个key,你的私钥,openssl会提示你输入一个密码,可以输入,也可以不输, # 输入的话,以后每次使用这个key的时候都要输入密码,安全起见,还是应该有一 ...

  10. C# 实现 微软WebRequestMethods.Ftp类中的FTP操作功能

    先奉献一个测试地址,ftp内的文件请勿删除,谢谢 FtpEntity fe = "); 由于代码量较多,只抽出一部分,详细代码请移步  ftp://wjshan0808.3vhost.net ...