Angular-ui FullCalendar在离子框架中的eventClick功能上打开模态

时间:2015-12-03 10:13:21

标签: angularjs events modal-dialog ionic-framework fullcalendar

我正在使用Ionic框架,我已成功将fullCalender移植到我的项目中,

我可以在eventClick上调用一个函数,即使它能完美地提供该事件标题的警告。

但我的主要目标是使用事件标题打开离子模态而不是alert()。

代码一直有效,直到警报来了,我是离子的新手需要一些想法如何实现这一点。到目前为止,我已经看到了下面的代码

app.js代码:

 $scope.calOptions = {
              editable : true,
              header : {
              left: 'prev',
              center: 'title,today',
              right: 'next'
              },
              eventClick: function(calEvent, jsEvent, view){
               var a=calEvent.description;
               var b=calEvent.title;
               alert('ALERT-1:' +a );

                 $scope.safeApply(function()
                 {
                 alert('ALERT-2:' + calEvent.description);
                 $scope.eventModal(a,b)
                 });
};


  $scope.eventModal=function(a,b){
  alert('ALERT-3:'+b);
  $scope.eventModal.show();
  }
  $ionicModal.fromTemplateUrl('modal.html', function($ionicModal) {
        $scope.eventModal = $ionicModal;
    },{
        scope: $scope,
        // The animation we want to use for the modal entrance
        animation: 'slide-in-up'
    });

为了更清楚,上面的代码显示“eventClick:”一直工作到“ALERT-3”,但是,在事件点击它调用函数“$scope.eventModal=function(a,b)”但之后在$scope.eventModal.show();下一行显示“show is not a function”,我想打开传递给“$scope.eventModal=function(a,b)”函数的变量的模态。

需要一个想法来实现打开传递给“$scope.eventModal=function(a,b)”的参数的模态。

提前完成。

1 个答案:

答案 0 :(得分:0)

尝试做一些简单的事情:

        eventClick: function(calEvent, jsEvent, view){
        $scope.a = calEvent.description;
        $scope.b = calEvent.title;
        $ionicModal.fromTemplateUrl('modal.html', {
            scope: $scope
        }).then(function (modal) {
            $scope.modal = modal;
            $scope.modal.show();
        }).catch(function(err){
            console.log(err);
        });
    };

在模态中,您可以绑定{{:: a}}和{{:: b}}或者您想要的任何内容。