无法将 angular ui 模态值更新回主叫屏幕

Question

我试图在单击列表元素时调用 angularUI 模式。我可以成功加载模态，更改模态中的值，然后返回来电屏幕。但我不知道如何更新来电屏幕上的列表。我尝试了各种方法，例如在调用者屏幕的控制器的 init() 方法内部进行更新，但是在模式关闭时不会调用它。我试图在控制器内部分配为变量，但这也不起作用。我的猜测是需要在下面的方法中做一些事情。

  modalInstance.result.then(function(personModified) {
    $log.info('personModified = ' + personModified.name + ' Finished at: ' + new Date());
  }, function() {
    $log.info('Modal dismissed at: ' + new Date());
  });
  };

尝试如下循环：

modalInstance.result.then(function(personModified) {

  for (int i = 0; i < modalCtrl.people.length; i++) {
    if (modalCtrl.people[i]._id === personModified._id) {
      modalCtrl.people[i] = personModified;
    }
  }

  $log.info('personModified = ' + personModified.name + ' Finished at: ' + new Date());
}, function() {
  $log.info('Modal dismissed at: ' + new Date());
});
};

但是在 modalInstance.result.then(function(){}) 方法中无法识别 modalCtrl。我不知道我还能做些什么来更新来电屏幕上的列表。任何帮助将不胜感激。这里是 plunker http://plnkr.co/edit/DR6Gadoh3rXegCrTOTzB?p=preview

Answer 1

打开模态时将数组元素索引与当前元素一起传递，如modalCtrl.open('lg', person, $index)，当模态调用成功时我们可以更新该特定索引的this.people数组。

HTML

<div ng-repeat="person in modalCtrl.people">
    <a ng-click="modalCtrl.open('lg', person, $index)" class="undecorated-link">
        <p class="text-center">{{person.name}}</p>
    </a>
</div>

代码

modalCtrl.open = function(size, selectedPerson, index) {

    var modalInstance = $modal.open({
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl',
        size: size,
        scope: $scope,
        resolve: {
            person: function() {
                return angular.copy(selectedPerson);
            }
        }
    });

    modalInstance.result.then(function(personModified) {
        $log.info('personModified = ' + personModified.name + ' Finished at: ' + new Date());
        modalCtrl.people[index] = personModified;
    }, function() {
        $log.info('Modal dismissed at: ' + new Date());
    });
};

Working Plunkr

希望对您有所帮助，谢谢。

无法将 angular ui 模态值更新回主叫屏幕

Not able to update angular ui modal values back to the caller screen

modal-dialog

angularjs

angularjs-scope