Question

我正在尝试使用$ http.delete删除一个事件（这是有效的）并从我的vm.events列表中删除此事件（使用splice）。

如何从showEventModal函数内部访问我的vm.events（事件列表）？我的删除按钮是一个模态。

在下面的代码中，我得到error: vm.events is undefined var index = vm.events.indexOf(event);和vm.events.splice(index, 1);，因为我无法访问showEventModal函数中的vm.events：

/* 
******************************************
****  Show Event Modal
******************************************
*/
function showEventModal(action, event) {
  $modal.open({
    templateUrl: 'modalEventContent.html',
    controller: function() {
      var vm = this;
      vm.action = action;
      vm.event = event;

      vm.toggle = function($event, field, event) {
            $event.preventDefault();
            $event.stopPropagation();
            vm.event[field] = !vm.event[field];
        };


      vm.eventDeleted = function(event) {

          $http.delete('/api/events/' + event.eventid).success(function(eventsuccess){

          var index = vm.events.indexOf(event);
          vm.events.splice(index, 1);
          }).error(function(err){
          /* do something with errors */
          });

          $modal.close();
      };                 

      vm.eventSaved = function(event) { 


           $http.put('/api/events/' + event.eventid, vm.event).success(function(eventsuccess){
           }).error(function(err){
           /* do something with errors */
           });

           $modal.close();

      };


    },
    controllerAs: 'vm'
  });
}

更新 - 添加了一个plunker链接

我已将此代码添加到plunker。它执行得不好（因为https错误），但你可以在demo.js

中看到上面的代码

更新 - 尝试将vm.events范围传递给我的函数

但我收到错误：Error: [$rootScope:inprog]

我在vm.events中添加showEventModal('Edited', event, vm.events); 在function showEventModal(action, event, events) 在vm.eventDeleted = function(event, events) { 我添加了vm.events = events;

/* 
******************************************
****  Show Event Modal
******************************************
*/
function showEventModal(action, event, events) {
  $modal.open({
    templateUrl: 'modalEventContent.html',
    controller: function() {
      var vm = this;
      vm.action = action;
      vm.event = event;

      vm.toggle = function($event, field, event) {
            $event.preventDefault();
            $event.stopPropagation();
            vm.event[field] = !vm.event[field];
        };


      vm.eventDeleted = function(event, events) {

          $http.delete('/api/events/' + event.eventid).success(function(eventsuccess){

          vm.events = events;

          var index = vm.events.indexOf(event);
          vm.events.splice(index, 1);
          }).error(function(err){
          /* do something with errors */
          });

          $modal.close();
      };                 

      vm.eventSaved = function(event) { 


           $http.put('/api/events/' + event.eventid, vm.event).success(function(eventsuccess){
           }).error(function(err){
           /* do something with errors */
           });

           $modal.close();

      };


    },
    controllerAs: 'vm'
  });
}


vm.eventClicked = function(event) {

     $http.get('/api/events/' + event.eventid).success(function(eventsuccess){

     showEventModal('Edited', event, vm.events);

     }).error(function(err){
   /* do something with errors */
});
  //console.log("logs");
};

Answer 1

您可以在showEventModal函数中传递对事件的引用。

所以我认为你只需要改变以下的实例：

         showEventModal('Edited', event);

到：

         showEventModal('Edited', event, events);

然后将showEventModal更改为：

function showEventModal(action, event, events) {
  $modal.open({
    templateUrl: 'modalEventContent.html',
    controller: function() {
      var vm = this;
      vm.action = action;
      vm.event = event;
      vm.events= events;
      ...

然后从事件列表中删除事件的代码应该可以正常工作。

如何从AngularJS中的函数内部访问列表

1 个答案: