Ionic Popover 无法将参数传递给控制器答案

【问题标题】：Ionic Popover cannot pass parameter to controllerIonic Popover 无法将参数传递给控制器
【发布时间】：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”中获取的

标签： android ios angularjs ionic-framework popover

【解决方案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}})”，参数可以顺利通过。谢谢你的回答，你帮我找出了错误！