AngularJS 全局scope与Isolate scope通信
在项目开发时,全局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通信的更多相关文章
- 全局scope与Isolate scope通信
AngularJS 全局scope与Isolate scope通信 在项目开发时,全局scope 和 directive本地scope使用范围不够清晰,全局scope与directive本地scope ...
- angularjs学习之八(angularjs中isolate scope的使用)
angular js中指令directive有个特别实用的东西,那就是 isolate scope (被隔离的scope) 关于详细他和全局的scope 有什么差别.能够參考以下这篇博文: Angul ...
- AngularJS 全局scope与指令 scope通信
在项目开发时,全局scope 和 directive本地scope使用范围不够清晰,全局scope与directive本地scope通信掌握的不够透彻,这里对全局scope 和 directive本地 ...
- 关于AngularJS学习整理---浅谈$scope(作用域) 新手必备!
作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正. $scope(作用 ...
- angularjs探秘<五> 举足轻重的scope
scope在angular中的作用可谓举足轻重,不理解scope就不会angular: scope是应用在 HTML (view) 和 JavaScript (controller)之间的纽带. sc ...
- AngularJS自定义指令directive:scope属性 (转载)
原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...
- 精通AngularJS(三)深入scope,继承结构,事件系统和生命周期
深入探讨 Scope 作用域 每一个 $scope 都是类 Scope 的一个实例.类 Scope 拥有可以控制 scope 生命周期的方法,提供事件传播的能力,并支持模板渲染. 作用域的层次结构 让 ...
- AngularJS中Directive指令系列 - scope属性的使用
文章是转的,我做下补充.原文地址:https://segmentfault.com/a/1190000002773689 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部 ...
- JavaScript文件中调用AngularJS内部方法或改变$scope变量
需要在其他JavaScript文件中调用AngularJS内部方法或改变$scope变量,同时还要保持双向数据绑定: 首先获取AngularJS application: 方法一:通过controll ...
随机推荐
- linux shell工具集合
1)判断进程是否存在,如果不存在再执行启动命令,可以避免一个脚本同时启动多份 if [ $(ps -ef |grep bastion_account.sh|grep -v grep|wc -l) - ...
- phpcms v9模版调用代码大全(全面而实用)
首页调用栏目 {pc:content action="category" siteid="$siteid" num="15" order=& ...
- 蓝牙 BLE GATT 剖析(二)-- GATT UUID and 举例
generic attribute profile (GATT)The Generic Attributes (GATT) define a hierarchical data structure t ...
- This system is not registered with RHN
在红帽EL5上运行yum,提示“This system is not registered with RHN”,意思是没有在官网上注册,不能下载RH的软件包,替代方案是采用centos源. 1.卸载r ...
- ASP.NET中 WebForm 窗体控件使用及总结【转】
原文链接:http://www.cnblogs.com/ylbtech/archive/2013/03/06/2944675.html ASP.NET中 WebForm 窗体控件使用及总结. 1.A, ...
- The Four Stages of Recovering a Project
If a project is in trouble, the project manager needs to work to recover it and get the schedule bac ...
- SQL Server 2008 R2[ALTER]列属性修改
1:向表中添加字段 Alter table [表名] add [列名] 类型 2: 删除字段 Alter table [表名] drop column [列名] 3: 修改表中字段类型 (可以修 ...
- setContentScaleFactor 设置图片的分辨率
float scale = [[UIScreenmainScreen] scale];//得到设备的分辨率 [imageView setContentScaleFactor:[[UIScreen ma ...
- procps包里面的sysctl命令
procps包里面的sysctl命令 --http://www.cnblogs.com/createyuan/p/3740917.html?utm_source=tuicool&utm_med ...
- Metro之Popup控件的使用(登录)
最终实现效果如下: 添加用户控件LoginPage.xaml,前台代码 <Popup x:Name="LoginPopup" Width="{Binding Ele ...