我正在使用onsen-ui 1.3.13而且我收到了这个我不明白的错误： 未捕获的TypeError：无法使用popover @ loader.js读取null的属性'attr'：1450
我基本上有1个按钮，当我点击它时，我有1个弹出窗口显示另外2个按钮。按钮2在阵列上执行简单的弹出。它会变得很糟糕，但是会立即给我这个错误。
这是我的代码：
的index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<script src="js/controler.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="js/angular-moment.js"></script>
<script src="js/readable-range.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/sliding_menu.css">
</head>
<body>
<ons-sliding-menu main-page="initial.html" menu-page="menu.html" max-slide-distance="260px" type="overlay" var="menu" side="left" close-on-tap>
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page modifier="menu-page">
<ons-toolbar modifier="transparent">
<div class="right">
<ons-toolbar-button class="menu-closeMenu" ng-click="menu.closeMenu()">
</ons-icon>Close
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list class="menu-list" ng-controller="PopoverController">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('initial.html', {closeMenu: true})">
<ons-icon icon="fa-gbp"></ons-icon>
Initial page
</ons-list-item>
<ons-list-item class="menu-item" ng-click="reset();menu.closeMenu()">
<ons-icon icon="fa-gbp"></ons-icon>
reset
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="popover.html">
<ons-popover direction="down" cancelable>
<ons-list>
<ons-list-item modifier="tappable" ng-click="alert(true, 'Sorry not available in this version')">
<ons-icon icon="fa-cloud"></ons-icon>
Save property
</ons-list-item>
<ons-list-item modifier="tappable" ng-click="reset(); destroy($event)" >
<ons-icon icon="fa-home"></ons-icon>
<label>Reset</label>
</ons-list-item>
</ons-list>
</ons-popover>
</ons-template>
</body>
</html>
controler.js：
var app = ons.bootstrap('propertyDeal', ['onsen','angularMoment']);
app.factory('Property', function () {
/**
* Constructor, with class name
*/
function Property(newProperty) {
this.id = newProperty.id;
this.purchasePrice = newProperty.pprice;
this.legaFee = newProperty.legal;
}
return {
createNew: function(newProperty) {
return new Property(newProperty);
}
};
});
app.factory('portfolio', function(Property){
var portfolio = {};
portfolio.list = [];
portfolio.add = function(newProperty){
var prop = Property.createNew(newProperty);
portfolio.list.push(prop);
};
portfolio.remove = function(){
var removed = portfolio.list.pop();
};
return portfolio;
});
app.controller('PopoverController', function($scope, portfolio) {
$scope.popurl = function(url, e) {
$scope.param = url;
ons.createPopover( $scope.param,{parentScope: $scope}).then(function(popover) {
$scope.popover = popover;
$scope.show(e);
});
$scope.show = function(e) {
$scope.popover.show(e);
};
$scope.destroy = function(e) {
$scope.popover.destroy(e);
};
};
$scope.alert = function(material, message) {
ons.notification.alert({
message: message,
modifier: material ? 'material' : undefined
});
};
$scope.reset = function() {
if (portfolio.list.length >= 1){
portfolio.remove();
}
};
});
app.controller('ListCtrl', function(portfolio) {
this.portfolio = portfolio.list;
});
app.controller('PostCtrl', function(portfolio){
this.addProperty = function(newProperty){
if (angular.isDefined(newProperty)) {
newProperty.id = portfolio.list.length;
portfolio.add(newProperty);
}
};
});
initial.html
<ons-navigator>
<ons-page>
<div class="container">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
<ons-icon class="icon" icon="ion-android-share"></ons-icon> this is a test
</div>
<div class="right" ng-controller="PopoverController">
<ons-toolbar-button id="android-share" ng-click="popurl('popover_share.html', $event)">
<ons-icon icon="ion-android-share" fixed-width="false"></ons-icon>
</ons-toolbar-button>
<ons-toolbar-button id="android-more" ng-click="popurl('popover.html', $event)">
<ons-icon icon="ion-android-more-vertical" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
</div>
<div style="text-align: center">
<h2>Page 1</h2>
<ul class="list">
<input type="hidden" ng-model="newProperty.id" placeholder="id">
<li class="list__item">
<span class="currency">£<input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.pprice" placeholder="Purchase price" required></span>
</li>
<li class="list__item">
<span class="currency">£<input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.legal" placeholder="Legal fees"></span>
</li>
</ul>
</div>
<br />
<div ng-controller="PostCtrl as post">
<button class="button" ng-click="post.addProperty(newProperty);menu.setMainPage('initial2.html')">Next <ons-icon icon="ion-arrow-right-b"></ons-icon></button>
<p>{{newProperty}}</p>
</div>
<div ng-controller="ListCtrl as list">
<p ng-repeat="prop in list.portfolio track by $index">
New Property: {{prop.id}} - {{prop.purchasePrice}}: {{prop.legaFee}} </p>
</div>
</ons-page>
</ons-navigator>
将滑动菜单中的reset（）添加到滑动菜单后，我也可以说滑动菜单完全正常，所以我认为这绝对是popover的一个问题，但我不知道是什么。
感谢您的帮助
答案 0 :(得分：1)
在该代码中，您正在反复创建和销毁弹出窗口。问题不在\# redis-server -v
Redis server v=3.0.5 sha=00000000:0 malloc=jemalloc-3.6.0 bits=64 build=efd64775fb9b8d51
\# redis-cli -v
redis-cli 3.0.5
\# redis-cli
127.0.0.1:6379> set foo 10 10
(error) ERR syntax error
函数中，而在reset()中。你试图在显示它时破坏弹出窗口并且存在计时问题。在内部，它会在它已经被摧毁时检查它的位置。即使现在没有消失的动画，因为你只是摧毁它而不是隐藏它。
解决方案是在该节目之后创建弹出窗口并在需要时隐藏它们。希望它有所帮助！
<强>更新：
你现在使用它的方式实际上有内存泄漏。每次单击工具栏按钮时都会创建弹出窗口并在destroy()函数中将其销毁。问题是如果你显示popover然后点击outsite它，它将被隐藏而不会被破坏，所以下次打开popover时会创建另一个。您可以检查您的DOM，并在每次添加1个popover时看到它。
使用popover的正确方法是只创建一次，然后在需要时显示并隐藏它。只有当你不再需要它时，你才需要销毁它。有一种方法可以自动完成：
reset()当您更改为另一个范围时，这将破坏当前范围中的弹出窗口。