无法将 angular ui 模态值更新回调用者屏幕 [英] Not able to update angular ui modal values back to the caller screen

问题描述

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

 modalInstance.result.then(function(personModified) {$log.info('personModified = ' + personModified.name + ' 完成时间:' + new Date());}， 功能() {$log.info('Modal 在以下时间被驳回:' + new Date());});};

尝试如下循环:

modalInstance.result.then(function(personModified) {for (int i = 0; i 

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

解决方案

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

HTML

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

代码

modalCtrl.open = function(size, selectedPerson, index) {var modalInstance = $modal.open({templateUrl: 'myModalContent.html',控制器:'ModalInstanceCtrl'，尺寸:尺寸，范围:$范围，解决: {人:函数(){返回 angular.copy(selectedPerson);}}});modalInstance.result.then(function(personModified){$log.info('personModified = ' + personModified.name + ' 完成时间:' + new Date());modalCtrl.people[index] = personModified;}， 功能() {$log.info('Modal 在以下时间被驳回:' + new Date());});};

工作 Plunkr

希望能帮到你，谢谢.

I'm trying to invoke angularUI modal when I click on an element of a list. I can successfully load the modal, change the value in the modal, and come back to the caller screen. But I don't know how to update the list on caller screen. I tried various things like updating inside init() method of the controller of caller screen but that doesn't get called on modal close. I tried to assign as variable inside controller but that doesn't work either. My guess is that something needs to be done inside below method.

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

Tried looping through like below:

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());
});
};

But modalCtrl is not recognized inside modalInstance.result.then(function(){}) method. I don't know what else can I do to update my list on caller screen. Any help would be hugely appreciated. Here is the plunker http://plnkr.co/edit/DR6Gadoh3rXegCrTOTzB?p=preview

解决方案

Pass array element index along with the current element while opening modal like modalCtrl.open('lg', person, $index), when success call of modal we can update this.people array of that specific index.

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>

CODE

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

Hope this could help you, Thanks.

这篇关于无法将 angular ui 模态值更新回调用者屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！