AngularUI之Modal的子作用域研究

最新推荐文章于 2024-01-04 12:00:00 发布

zhu jun~

最新推荐文章于 2024-01-04 12:00:00 发布

阅读量2.4k

点赞数

文章标签： angularUI Modal 子作用域继承

本文链接：https://blog.csdn.net/zhujun_xiaoxin/article/details/53172778

版权

我们知道通过AngularUI打开模态对话框的方法是 $uibModal.open({});open的参数是一个对象，其中一个key为scope。如果我们设置scope:$ scope。则模态对话框继承了父作用。
下面我们来讲子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>