在项目开发时,全局scope 和 directive本地scope使用范围不够清晰,全局scope与directive本地scope通信掌握的不够透彻,这里对全局scope 和 directive本地scope的使用做一个总结。

一、scope作用域

1、AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法。但有一个例外:在directive中使用scope: { ... },这种方式创建的作用域是一个独立的"Isolate"作用域,它也有父作用域,但父作用域不在其原型链上,不会对父作用域进行原型继承。这种方式定义作用域通常用于构造可复用的directive组件.

2、如果我们在子作用域中访问一个父作用域中定义的属性,JavaScript首先在子作用域中寻找该属性,没找到再从原型链上的父作用域中寻找,如果还没找到会再往上一级原型链的父作用域寻找。在AngularJS中,作用域原型链的顶端是$rootScope,JavaScript寻找到$rootScope为止.

3、scope: { ... } - directive创建一个独立的“Isolate”作用域,没有原型继承。这是创建可复用directive组件的最佳选择。因为它不会直接访问/修改父作用域的属性,不会产生意外的副作用。

二、Isolate scope 引用修饰符

1、 = or =attr “Isolate”作用域的属性与父作用域的属性进行双向绑定,任何一方的修改均影响到对方,这是最常用的方式;

2、 @ or @attr “Isolate”作用域的属性与父作用域的属性进行单向绑定,即“Isolate”作用域只能读取父作用域的值,并且该值永远的String类型;

3、 & or &attr “Isolate”作用域把父作用域的属性包装成一个函数,从而以函数的方式读写父作用域的属性,包装方法是$parse

三、directive 与 controller 数据传递和通信

1、父controller监听全局scope(父scope)变量, 并广播事件给子scope(directive scope,每个directvie都有自己独立的scope作用域)

2、directive 定义本地scope,通过=、@、&(方法)字符显示引用全局scope

3、directive scope(子scope)通过parent[$scope.$parent.xxx]引用全局scope的属性

4、directive监听全局scope变量变化,可以通过$scope.$parent.$watch方法

四、实例说明

<div ng-controller="MyCtrl">
<button ng-click="show=true">show</button>
<dialog title="Hello }"
visible="}"
on-cancel="show=false;"
on-ok="show=false;parentScope();">
<!--上面的on-cancel、on-ok,是在directive的isoloate scope中通过&引用的。
如果表达式中包含函数,那么需要将函数绑定在parent scope(当前是MyCtrl的scope)中-->
Body goes here: username:} , title:}.
<ul>
<!--这里还可以这么玩~names是parent scope的-->
<li ng-repeat="name in names">}</li>
</ul>
<div>
Email:<input type="text" ng-model="email" style="width: 200px;height:20px"/>
</div>
<div>
Count:<input type="text" ng-model="person.Count" style="width: 120px;height:20px"/>
<button ng-click="changeCount()">Count加1</button>
</div>
<p></p>
</dialog>
</div>

  Controller 测试代码:

var app = angular.module("Dialog", []);
app.controller("MyCtrl", function ($scope) {
$scope.person = {
Count: 0
};
$scope.email = 'carl@126.com';
$scope.names = ["name1", "name2", "name3"];
$scope.show = false;
$scope.username = "carl";
$scope.title = "parent title";
$scope.parentScope = function () {
alert("scope里面通过&定义的东东,是在父scope中定义");
}; $scope.changeCount = function () {
$scope.person.Count = $scope.person.Count + 1;
} // 监听controller count变更, 并发出事件广播,再directive 中 监听count CountStatusChange变更事件
$scope.$watch('person.Count', function (newVal, oldVal) {
console.log('>>>parent Count change:' + $scope.person.Count);
if (newVal != oldVal) {
console.log('>>>parent $broadcast count change');
$scope.$broadcast('CountStatusChange', {"val": newVal})
}
}); }); app.directive('dialog', function factory() {
return {
priority: 100,
template: ['<div ng-show="visible">',
' <h3>}</h3>',
' <div class="body" ng-transclude></div>',
' <div class="footer">',
' <button ng-click="onOk()">OK</button>',
' <button ng-click="onCancel()">Close</button>',
' </div>',
'</div>'].join(""),
replace: false,
transclude: true,
restrict: 'E',
scope: {
title: "@",//引用dialog标签title属性的值
visible: "@",//引用dialog标签visible属性的值
onOk: "&",//以wrapper function形式引用dialog标签的on-ok属性的内容
onCancel: "&"//以wrapper function形式引用dialog标签的on-cancel属性的内容
},
controller: ['$scope', '$attrs', function ($scope, $attrs) { // directive scope title 通过@ 引用dialog标签title属性的值,所以这里能取到值
console.log('>>>title:' + $scope.title);
>>>title:Hello carl scope.html:85 // 通过$parent直接获取父scope变量页可以
console.log('>>>parent username:' + $scope.$parent.username);
>>>parent username:carl // directive scope 没有定义username 变量,并且没有引用父scope username变量, 所以这里是undefined
console.log('>>>child username:' + $scope.username);
>>>username:undefined // 接收由父controller广播count变更事件
$scope.$on('CountStatusChange', function (event, args) {
console.log("child scope on(监听) recieve count Change event :" + args.val);
}); // watch 父 controller scope对象
$scope.$parent.$watch('person.Count', function (newVal, oldVal) {
console.log('>>>>>>>child watch parent scope[Count]:' + oldVal + ' newVal:' + newVal);
}); }]
};
});

  

AngularJS 全局scope与Isolate scope通信的更多相关文章

  1. 全局scope与Isolate scope通信

    AngularJS 全局scope与Isolate scope通信 在项目开发时,全局scope 和 directive本地scope使用范围不够清晰,全局scope与directive本地scope ...

  2. angularjs学习之八(angularjs中isolate scope的使用)

    angular js中指令directive有个特别实用的东西,那就是 isolate scope (被隔离的scope) 关于详细他和全局的scope 有什么差别.能够參考以下这篇博文: Angul ...

  3. AngularJS 全局scope与指令 scope通信

    在项目开发时,全局scope 和 directive本地scope使用范围不够清晰,全局scope与directive本地scope通信掌握的不够透彻,这里对全局scope 和 directive本地 ...

  4. 关于AngularJS学习整理---浅谈$scope(作用域) 新手必备!

    作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正. $scope(作用 ...

  5. angularjs探秘<五> 举足轻重的scope

    scope在angular中的作用可谓举足轻重,不理解scope就不会angular: scope是应用在 HTML (view) 和 JavaScript (controller)之间的纽带. sc ...

  6. AngularJS自定义指令directive:scope属性 (转载)

    原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...

  7. 精通AngularJS(三)深入scope,继承结构,事件系统和生命周期

    深入探讨 Scope 作用域 每一个 $scope 都是类 Scope 的一个实例.类 Scope 拥有可以控制 scope 生命周期的方法,提供事件传播的能力,并支持模板渲染. 作用域的层次结构 让 ...

  8. AngularJS中Directive指令系列 - scope属性的使用

    文章是转的,我做下补充.原文地址:https://segmentfault.com/a/1190000002773689 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部 ...

  9. JavaScript文件中调用AngularJS内部方法或改变$scope变量

    需要在其他JavaScript文件中调用AngularJS内部方法或改变$scope变量,同时还要保持双向数据绑定: 首先获取AngularJS application: 方法一:通过controll ...

随机推荐

  1. 【Android测试】【第二节】性能——CPU时间片

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/5143192.html 前言 第一节讲CPU的时候留下了一个 ...

  2. 【Android测试】【第四节】LogCat——认识和使用

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/4682321.html 什么是LogCat LogCat可以 ...

  3. sphinx续5-主索引增量索引和实时索引

    原文件地址:http://blog.itpub.net/29806344/viewspace-1400942/ 在数据库数据非常庞大的时候,而且实时有新的数据插入,如果我们不更新索引,新的数据就sea ...

  4. LightOj 1024 - Eid (求n个数的最小公约数+高精度)

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1024 题意:给你n(2<=n<=1000)个数, 然后求n个数的最小公倍数 ...

  5. centos 6.4 安装视频解码器

    cd /etc/yum.repos.d/ wget http://mirrors.163.com/.help/CentOS6-Base-163.repo yum update rpm -Uhv htt ...

  6. Windows-001-Win7系统变量设置

    本节主要讲述Windows系统环境变量配置介绍,以 Windows 7 为例讲解. 1.右键单击 计算机,选择 属性,进入 系统 界面,如下所示: 2.点击上图中的 高级系统设置,进入 系统属性 界面 ...

  7. jquery在线手册

    开发时用到jquery,有几个函数想不起来怎么用,找了一下jquery在线手册. 记录一下,下回有需要再看看. 链接:http://www.chenfahui.cn/jq/

  8. imx6 生成 spi设备节点

    开发板需要使用spi接口,但是spi接口被touch占用,使用event进行操作.所以需要更改配置,生成spi设备节点. 参考链接 https://community.nxp.com/thread/3 ...

  9. 给网卡配置10个临时ip地址,但是不配置192.168.17.15这个ip

    给网卡配置10个临时ip地址,但是不配置192.168.17.15这个ip #!/bin/bash `;do ];then continue fi ifconfig eth0:$i .$i netma ...

  10. 30天,O2O速成攻略【7.18广州站】

    活动概况 时间:2015年07月18日13:30-16:30 地点:贝塔咖啡(新港中路TIT创意园内创意西路07号楼) 主办:APICloud.七牛.洪海网络 网址:www.apicloud.com ...