AngularJS全局scope与Isolate scope通信用法示例


Posted in Javascript onNovember 22, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 乱码问题
Aug 06 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 Javascript
基于js实现checkbox批量选中操作
Nov 22 #Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 #Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 #Javascript
详解Js模板引擎(TrimPath)
Nov 22 #Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 #Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 #Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 #Javascript
You might like
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
jquery下checked取值问题的解决方法
2012/08/09 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
Python正则表达式匹配ip地址实例
2014/10/09 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
介绍一下#error预处理
2015/09/25 面试题
网络技术专业求职信
2014/02/18 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
年度评优评先方案
2014/06/03 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
作风建设年度心得体会
2014/10/29 职场文书
学生保证书
2015/01/16 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
Python中tqdm的使用和例子
2022/09/23 Python