Ionic Popover 无法将参数传递给控制器
Posted
技术标签:
【中文标题】Ionic Popover 无法将参数传递给控制器【英文标题】：Ionic Popover cannot pass parameter to controller 【发布时间】：2016-02-11 05:01:57 【问题描述】：这里是代码
App.js
(...)
.state('app.dishdetails',
url: '/menu/:id',
views:
'mainContent':
templateUrl: 'templates/dishdetail.html',
controller: 'DishDetailController'
);
Controller.js
.controller('DishDetailController', ['$scope', '$stateParams', 'menuFactory', 'favoriteFactory', 'baseURL','$ionicPopover', '$ionicListDelegate', '$ionicModal', function($scope, $stateParams, menuFactory, favoriteFactory, baseURL, $ionicPopover, $ionicListDelegate, $ionicModal)
$scope.addFavoriteMenu = function(index)
console.log("index is " + index);
;
// .fromTemplateUrl() method
$ionicPopover.fromTemplateUrl('templates/dish-detail-popover.html',
scope: $scope
).then(function(popover)
$scope.popover = popover;
);
$scope.openPopover = function($event)
$scope.popover.show($event);
;
$scope.closePopover = function()
$scope.popover.hide();
;
//Cleanup the popover when we're done with it!
$scope.$on('$destroy', function()
$scope.popover.remove();
);
// Execute action on hide popover
$scope.$on('popover.hidden', function()
// Execute action
);
// Execute action on remove popover
$scope.$on('popover.removed', function()
// Execute action
);
])
主 HTML
<ion-view view-title="Dish Details">
<ion-nav-buttons side="secondary">
<div class="buttons">
<button class="button button-icon icon ion-more"
ng-click="openPopover($event)"></button>
</div>
</ion-nav-buttons>
<ion-content>
(...)
</ion-content>
</ion-view>
弹出式 HTML
<ion-popover-view>
<ion-content>
<ul class="list">
<li class="item" ng-click="addFavoriteMenu(dish.id)">
Add to Favorites
</li>
</ul>
</ion-content>
db.json
"dishes": [
"id": 0;
"id": 1;
"id": 2;
]
我无法在controller.js中的“addFavoriteMenu(dish.id)”中获取参数，它总是以未定义的形式出现
但是，当我尝试使用 Google Chrome 进行检查时，ID 可以在 [ion-popover-view] 中正确显示
我在这里创建了任何错误吗？还是什么？
【问题讨论】：
@lyrience 从哪里得到dish.id 请发布完整的 html
抱歉，我已经编辑了我的帖子。我从“db.json”中获取的
【参考方案1】：
试图重现您的问题，我注意到您的 JSON 错误：每行末尾都有分号 (;) 而不是冒号 (,)。
但是这里是一个有效的 sn-p：
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $ionicPopover)
$scope.dishes = [
"id": 0,
"id": 1,
"id": 2
];
$scope.addFavoriteMenu = function(index)
console.log(index);
alert("index is "+index);
$ionicPopover.fromTemplateUrl('templates/popover.html',
scope: $scope,
).then(function(popover)
$scope.popover = popover;
);
);<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Popover</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="platform-ios" ng-controller="AppCtrl">
<div class="bar bar-header bar-positive">
<h1 class="title">Popover</h1>
<div class="buttons">
<button class="button button-icon ion-more" ng-click="popover.show($event)">
</button>
</div>
</div>
<ion-content class="padding has-header">
Click the more info icon in the top right. In an actual app the platform style will automatically be set.
</ion-content>
<script id="templates/popover.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<ul class="list">
<li ng-repeat="dish in dishes" class="item" ng-click="addFavoriteMenu(dish.id)">
Add to Favorites dish.id
</li>
</ul>
</ion-content>
</ion-popover-view>
</script>
</body>
</html>【讨论】：
感谢您的回答！对不起，我错误地重新创建了json代码，因为实际的代码太长了，所以我简化了它，但是我输入错误，输入了分号 (;) 而不是逗号 (,) 。我发现如果我输入“addFavoriteMenu(dish.id)”而不是“addFavoriteMenu(dish.id)”，参数可以顺利通过。谢谢你的回答，你帮我找出了错误！以上是关于Ionic Popover 无法将参数传递给控制器的主要内容，如果未能解决你的问题，请参考以下文章
将带有 window.location.href 的参数传递给 MVC ActionResult