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 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 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
基于PHP静态类的原罪详解
2013/05/06 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
实例讲解php实现多线程
2019/01/27 PHP
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
Vue.use源码学习小结
2018/06/20 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
python中的变量如何开辟内存
2018/06/26 Python
浅析python的Lambda表达式
2019/02/27 Python
六行python代码的爱心曲线详解
2019/05/17 Python
python连接mysql有哪些方法
2020/06/24 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
法学个人求职信范文
2014/01/27 职场文书
党员公开承诺书
2014/03/25 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
党员群众路线承诺书
2014/05/20 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
2014年城管工作总结
2014/11/20 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
学校计划生育责任书
2015/05/09 职场文书
摩登时代观后感
2015/06/03 职场文书
2015大一新生军训感言
2015/08/01 职场文书
Python字典的基础操作
2021/11/01 Python