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. Hibernate - lazy, fetch, inverse, cascade

    Inverse是hibernate双向关系中的基本概念.inverse的真正作用就是指定由哪一方来维护之间的关联关系.当一方中指定了"inverse=false"(默认),那么那一 ...

  2. webservice的简单示例的实现步骤

    前段时间在webservice的问题上纠结了很长时间,本来想写在thinkphp的框架里面,可是怎么也实现不了,目前为止也仅仅是学会的没有框架的接口的开发. 在此资源共享一下步骤: 首先我创建的文件有 ...

  3. Beginning Android 4 中 Demo Basic/Switch 的问题.

    作者的版本: layout (main.xml): <?xml version="1.0" encoding="utf-8"?> <Linea ...

  4. [转] PHP计算两个坐标之间的距离, Calculate the Distance Between Two Points in PHP

    Calculate the Distance Between Two Points in PHP There are a lot of applications where it is useful ...

  5. jsp 环境配置记录

    1. jdk,下载地址1 环境变量配置: 1)新建 JAVA_HOME 变量 . 变量值填写jdk的安装目录(本人是 C:\Java\jdk1.7.0) 2)  系统变量→寻找 Path 变量→编辑 ...

  6. VirtualBox网络设置讲解

    VirtualBox的提供了四种网络接入模式,它们分别是:           1.NAT 网络地址转换模式(NAT,Network Address Translation) 虚拟机访问网络,是通过主 ...

  7. 网站中集成jquery.imgareaselect实现图片的本地预览和选择截取

    imgAreaSelect 是由 Michal Wojciechowski开发的一款非常好用的jquery插件,实现了图片的截取功能.其文档和Demo也是很详尽的.大家可以到http://odynie ...

  8. Web Components是不是Web的未来

    今天 ,Web 组件已经从本质上改变了HTML.初次接触时,它看起来像一个全新的技术.Web组件最初的目的是使开发人员拥有扩展浏览器标签的能力,可以自由的进行定制组件.面对新的技术,你可能会觉得无从下 ...

  9. 利用BMFont和NGUI制作字体集

    Unity中常常需要制作字体,也算是Unity的基本优势吧!其实质就是BMFont和NGUI制作字体.这里把步骤介绍一下: 1.先下载BMFont这个工具 2.Font Settings  设置:(1 ...

  10. LR HTML与URL录制方式区别

    Recording录制选项 这里提供了两个大类的录制方式: 1. HTML-based script基于HTML的脚本 这种方式录制出来的脚本是基于HTML基础的,为每个用户操作生成单独的步骤,这种脚 ...