AngularUI之Modal的子作用域研究
来源:互联网 发布:java好玩的程序 知乎 编辑:程序博客网 时间:2024/04/30 08:36
我们知道通过AngularUI打开模态对话框的方法是
下面我们来讲子scope继承父scope的原理:总的来说只有一句话,子作用域对父作用域的继承,变量相当于值传递,对象和数组是引用传递。
也就是说,我们在子作用域中可以访问和修改父作用域中的基本数据类型的变量,但是这种修改对于父作用域是不可见的。子作用域也可以对父作用域中的对象进行访问和修改,且这种修改对于父作用域是可见的,因为它是引用传递。
下面的代码是我自己求证的一个例子,供参考:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>modal</title> <script src="js/angular.min.js" type="text/javascript"></script> <script src="js/angular-animate.min.js" type="text/javascript"></script> <script src="js/ui-bootstrap-tpls-2.1.4.js" type="text/javascript"></script> <link href="css/bootstrap.css" rel="stylesheet"></head><body ng-app="myApp"> <div ng-controller="myController"> 父变量:{{parentVal}} 父对象:{{parent.val}} <button ng-click="openModal()">Open Modal</button> </div> <script> var app = angular.module("myApp",["ui.bootstrap"]); app.controller("myController",function($scope,$uibModal){ $scope.parentVal = "value form controller"; $scope.parent = {}; $scope.parent.val = "parentObj val"; $scope.openModal = function(){ var modalInstance = $uibModal.open({ templateUrl: "modal.html", controller: ModalController, scope: $scope, size: "lg" }); }; var ModalController = function($scope){ $scope.changeParentVal = function(){ $scope.parentVal = "value from modal"; $scope.parent.val = "object val from modal"; } }; }); </script></body></html><script type="text/ng-template" id="modal.html"> <div> <h1>This is the Modal</h1> 从父作用继承的变量:{{parentVal}} 从父作用域继承的对象的值: {{parent.val}} <button ng-click="changeParentVal()">Change Parent Value</button> </div></script>
0 0
- AngularUI之Modal的子作用域研究
- AngularUI之Modal
- angularUI之accordion的用法
- AngularUI之collapse
- 关于bootstrap的modal弹出层嵌套子Modal所引发的血案
- Bootstrap的js插件之模态框(modal)
- 子作用域和父作用域的事件传播
- OC中的@的作用研究
- bootstrap之modal
- AngularUI Router
- 让eval()全局作用域执行的方法深入研究
- yii2基础之modal弹窗的基本使用
- React-Native 组件之 Modal的使用详解
- using关键子的作用
- angular的指令的子作用域继承问题
- modal的使用
- modal 控制器的样式
- 关于 modal 的知识
- 为什么 ++[[]][+[]]+[+[]] = 10?
- 机器学习的应用
- 三座”大山“或让谷歌无人机送货项目被冻结
- SCNNode类
- jQuery学习笔记 - addClass()
- AngularUI之Modal的子作用域研究
- squid反向代理作web加速-配置详解
- 如何在 Linux 中将文件编码转换为 UTF-8
- 【错排公式】 hdu2049 不容易系列之(4)——考新郎(错排+排列组合)
- android 回调
- codevs 5570 Xor(dfs)
- unity 网游中玩家移动其它客户端同步显示方案
- ZooKeeper系列之一: Zookeeper 介绍
- 最全面最稳定的Java读写操作工具箱