ionic组件popover的scope继承问题
谢豪
之前的博客已经介绍过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页面使用了自定义指令：
<!--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>
类似资料：