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. JAVA文件夹导入到Eclipse中方法:

    将JAVA文件夹导入到Eclipse中方法:方法一: 直接将java文件夹复制,然后粘贴到项目下:方法二:1.打开eclipse,点击项目的空白处,选择import:2.选择Existing Proj ...

  2. 关于IOS的证书、App ID、设备、Provisioning Profile详述

    首先,打开developer.apple.com ,在iOS Dev Center打开Certificates, Indentifiers & Profiles认识一下基本结构.列表就包含了开 ...

  3. hive函数参考手册

    hive函数参考手册 原文见:https://cwiki.apache.org/confluence/display/Hive/LanguageManual+UDF 1.内置运算符1.1关系运算符 运 ...

  4. Oracle 参数之_small_table_threshold

    SQL> select * from v$version; BANNER ------------------------------------------------------------ ...

  5. [BS-31]导航控制器的interactivePopGestureRecognizer属性

    导航控制器的interactivePopGestureRecognizer属性 如何自定义导航控制器push出来的视图控制器的左侧返回按钮? 首先需要知道的是:如果要自定义push出来的VC的左侧返回 ...

  6. cocos2d-x场景切换动画

    void StartScene::beginGame() {     CCLog("beginGame");          //CCTransitionScene *trans ...

  7. Android -- 自定义View小Demo,绘制四位数随机码(一)

    1,现在有这样一个需求,实现显示随机随机数可能在代码中直接很简单的就实现了,但是现在我们直接自定义View来实现这个效果,那么我们来分析一波吧,我们允许开发者自己设置这个textview的大小,颜色, ...

  8. AJAX-----07XMLHttpRequest对象的处理返回的JSON类型数据

    要玩json首先就需要知道一般都数据是怎么处理的: <!DOCTYPE html> <html lang="en"> <head> <me ...

  9. Ninject简介

    1.为什么要用Ninject? Ninject是一个IOC容器用来解决程序中组件的耦合问题,它的目的在于做到最少配置.其他的的IOC工具过于依赖配置文件,需要使用assembly-qualified名 ...

  10. php中rsa加密解密验证

    RSA非对称加密,对敏感的数据传输进行数据加密.验证等.测试环境:wamp.aliyun虚拟主机(lamp)一.加密解密的第一步是生成公钥.私钥对,私钥加密的内容能通过公钥解密(反过来亦可以).下载生 ...