ionic组件popover的scope继承问题

最新推荐文章于 2020-09-09 13:50:14 发布

aitangyong

最新推荐文章于 2020-09-09 13:50:14 发布

阅读量2.1k

点赞数

分类专栏： ionic 文章标签： popover的scope scope的父子关系

本文链接：https://blog.csdn.net/aitangyong/article/details/50820852

版权

ionic 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文探讨了在使用Ionic Popover组件时遇到的Scope继承问题。根据官方文档，当创建Popover时，它将创建一个新的Scope作为指定Scope的子Scope。在实际项目中，作者遇到了一个具体问题，即Popover页面内的自定义指令与主页面Scope交互出现异常，这引发了对Scope父子关系深入研究的必要性。

摘要由CSDN通过智能技术生成

之前的博客已经介绍过popover组件的基本使用，这篇文章来看一下scope的继承问题。使用popover组件一般都会书写如下类似的代码：打开popover的时候会设置一个scope参数。

$ionicPopover.fromTemplateUrl('my-popover.html', {
	scope: $scope
}).then(function(popover) {
	popover.show($("#target"));
});

查阅ionic官方文档可以知道：ionic框架创建popover的时候会生成一个新的scope，作为制定scope的子作用域。

<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<script src="jquery-1.11.1.min.js"></script>
    <script src="./1.1.1-release/js/ionic.bundle.js"></script>
	<link rel="stylesheet" type="text/css" href="./1.1.1-release/css/ionic.css" />
	<script>
	var testModule = angular.module('testApp', ['ionic']);
	testModule.controller('MyController', function($scope, $ionicPopover) {

		$scope.eventPopover = function($event) {
			$ionicPopover.fromTemplateUrl('my-popover.html', {
					scope: $scope
			}).then(function(popover) {
				// 获取popover生成的scope
				var newScope = popover.scope;
				
				// 显示popover
				popover.show($event);

				// true
				alert(newScope.$parent == $scope);
			});
		};
	});
       
	$(function(){
		angular.bootstrap($("#body"), ["testApp"]);
	})
	</script>
</head>

<body id="body" ng-controller="MyController">
	<ion-header-bar class="bar-positive">
	</ion-header-bar>

	<ion-content class="has-header" style="background-color: #ebebeb;">
		<button ng-click="eventPopover($event)">button1</button>
		<button ng-click="eventPopover($event)">button2</button>
	</ion-content>
	
	<ion-footer-bar class="bar-balanced">
		<div class="title">Footer</div>
	</ion-footer-bar>
</body>
</html>

<script id="my-popover.html" type="text/ng-template">
	<ion-popover-view>
		<ion-header-bar>
			<h1 class="title">{{title}}</h1>
		</ion-header-bar>
		<ion-content>
			<input ng-model="myValue">
			<br />
			hi, {{myValue}}
		</ion-content>
	</ion-popover-view>
</script>

我们可以通过popover.scope拿到新生成的scope，可以很明显地看到scope的父子关系。

之前所以有这篇文章，是源于项目中遇到的一个问题，大致是这个样子的：popover页面使用了自定义指令：

<!--popover内容,iron-calendar是我们自定义的指令-->
<ion-content class="content has-header">
	<div class="padding">
		<iron-calendar ng-model="dateValue"></iron-calendar>
	</div>
</ion-content>

我们在另外一个页面，会打开多个popover：

<body id="body" ng-controller="MyController">
	<ion-header-bar class="bar-positive">
	</ion-header-bar>

	<ion-content class="has-header" style="background-color: #ebebeb;">
		<button ng-click="eventPopover($event, 'button1')">button1</button>
		<button ng-click="eventPopover($event, 'button2')">button2</button>
	</ion-content>
	
	<ion-footer-bar class="bar-balanced">
		<div class="title">Footer</div>
	</ion-footer-bar>
</body>

很显然我们希望这几个popover之间不要相互干扰，这个很容易，因为每次调用fromTemplateUrl打开新的popover时候都会新建一个scope，彼此之间自然是隔离的。由于这几个popover很类似，自然也有一些公共操作。所以我们可以：将公共的属性和方法放在parent scope中，需要彼此隔离的数据放在child scope中。

<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<script src="jquery-1.11.1.min.js"></script>
    <script src="./1.1.1-release/js/ionic.bundle.js"></script>
	<link rel="stylesheet" type="text/css" href="./1.1.1-release/css/ionic.css" />
	<script>
	var testModule = angular.module('testApp', ['ionic']);
	testModule.controller('MyController', function($scope, $ionicPopover) {
	
		$scope.root = 1;
		$scope.popovers = {};

		$scope.eventPopover = function($event, id) {
			if($scope.popovers[id])
			{
				$scope.popovers[id].show($event);
			}
			else
			{
				$ionicPopover.fromTemplateUrl('my-popover.html', {
					scope: $scope
				}).then(function(popover) {
					$scope.popovers[id] = popover;
					popover.show($event);
					
					popover.scope.title = id;
					
					popover.scope.myValue = '';
				});
			}
		};
			
	});
       
	$(function(){
		angular.bootstrap($("#body"), ["testApp"]);
	})
	</script>
</head>

<body id="body" ng-controller="MyController">
	<ion-header-bar class="bar-positive">
	</ion-header-bar>

	<ion-content class="has-header" style="background-color: #ebebeb;">
		<button ng-click="eventPopover($event, 'button1')">button1</button>
		<button ng-click="eventPopover($event, 'button2')">button2</button>
	</ion-content>
	
	<ion-footer-bar class="bar-balanced">
		<div class="title">Footer</div>
	</ion-footer-bar>
</body>
</html>

<script id="my-popover.html" type="text/ng-template">
	<ion-popover-view>
		<ion-header-bar>
			<h1 class="title">{{title}}</h1>
		</ion-header-bar>
		<ion-content>
			<input ng-model="myValue">
			<br />
			hi, {{myValue}}
		</ion-content>
	</ion-popover-view>
</script>

可以看到：2个popover之间的ng-model是彼此独立的。

aitangyong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ionic组件popover的scope继承问题

很显然我们希望这几个popover之间不要相互干扰，这个很容易，因为每次调用fromTemplateUrl打开新的popover时候都会新建一个scope，彼此之间自然是隔离的。由于这几个popover很类似，自然也有一些公共操作。所以我们可以：将公共的属性和方法放在parent scope中，需要彼此隔离的数据放在child scope中。
复制链接

扫一扫