Question

我不知道为什么我无法访问$ scope.menuPopUpDelete中的$ scope，我需要删除弹出窗口中单击的行程。 $ scope.trips不是控制器内的全局变量?? 我很感激你的帮助！

HTML：

<body ng-controller="mytripsController">
 <ul class="my-trips-list" style="padding-bottom: 100px;" ng-model="trips">
 <li class="my-trip-item module" ng-repeat="trip in trips" >
    <div class="list-image">
        <img src="http://upload.wikimedia.org/wikipedia/commons/9/96/Beach_pano.jpg">
        <h1>{{trip.title}}</h1>
    </div>
    <div class="list-content">
        <div class="menu-points" ng-click="showMenuPopUp($event)">
            <img src="images/menu-points.png"/>
            <div class="popup-menu" style="display: none">
                <div ng-click="menuPopUpDeleteClicked($event,$index)">Eliminar</div>
            </div>
        </div>
    </div>
    </li>
    </ul>
   </body>

JS：

 var mytrips = angular.module('mytrips',[]);
 mytrips.controller('mytripsController', function ($scope) {
$scope.trips = [
    {
        "id":"1",
        "title":"Plan de viaje Mallorca",
        "island": "Mallorca",
        "duration": "3",
        "startDate":"19/10/2014",
        "endDate":"21/10/2014",
        "image":"fotoTrips.jpg"
    },
    {
        "id":"2",
        "title":"Plan de viaje Mallorca2",
        "island": "Mallorca",
        "duration": "3",
        "startDate":"19/10/2014",
        "endDate":"21/10/2014",
        "image":"fotoTrips.jpg"
    }

];

$scope.showMenuPopUp = function($event){
    var $popup = $($event.currentTarget).find('.popup-menu');
    $popup.show('fast',function(){
        $('body').click(function(){
            $popup.hide();
            $(this).unbind("click");
        });
    });
}
$scope.menuPopUpDeleteClicked = function($event,$index){
}
  });

Answer 1

我认为您的问题更多地取决于HTML结构的方式而不是其他任何方式。你点击的内容正在被吞噬，从未被执行过。试试这个，看起来效果很好。

    <div class="menu-points" ng-click="showMenuPopUp('popup1')">
        <img src="images/menu-points.png"/>
    </div>
        <div id='popup1' class="popup-menu" style="display: none">
            <div ng-click="menuPopUpDeleteClicked($event,$index)">Eliminar</div>
        </div>

   $scope.showMenuPopUp = function(name){
    var $popup = $('#'+name);
    $popup.show('fast',function(){
      $('body').click(function(){
          $popup.hide();
          $(this).unbind("click");
      });
    });
   }
   $scope.menuPopUpDeleteClicked = function($event,$index){
     console.log("inside here");
     console.log($scope.trips);
   }

请注意，当点击事件被吞噬时，弹出窗口会从封闭的div中取出。弹出我们弹出的弹出窗口的名称而不是事件。

$ scope未在弹出窗口调用的函数内定义

1 个答案: