Question

我试图将模态对话框用作选择列表。我已将模态对话框配置为工厂。

如何从http://plnkr.co/edit/fVpNtrr4Ez68yWYUlgnO?p=preview获取代码以从模态窗口返回所选人员？

var selectModal = function ($modal) {
        function show(personList) {
            var modalOptions = {
                templateUrl: "select-modal.html",
                controller: selectModalInstanceCtrl,
                controllerAs: "modal",
                windowClass: "ab-modal-window",
                resolve: {
                    personList: function () { return personList; }
                }
            };

            var modalInstance = $modal.open(modalOptions);

            modalInstance.result.then(function (person) {
                return person;
            });
        }

        return {
            show: show
        };
};


var selectModalInstanceCtrl = function ($modalInstance, personList) {
  var modalVm = this;

    modalVm.personList = personList;

    modalVm.selectPerson = function (person) {
        $modalInstance.close(person);
    };

    modalVm.ok = function () {
        $modalInstance.dismiss("ok");
    };
};


var mainCtrl = function (selectModal)
{
  var vm = this;

  vm.personList = ['Tom','Dick','Harry','Jane'];
  vm.selectedPerson = null;

    vm.showSelectModal = function () {
        vm.selectedPerson = selectModal.show(vm.personList, vm.selectedPerson);
    };

};

selectModalInstanceCtrl.$inject = ["$modalInstance", "personList"];
selectModal.$inject = ['$modal'];
mainCtrl.$inject = ['selectModal'];

angular.module('app', ['ui.bootstrap']);
angular.module('app').factory('selectModal', selectModal);
angular.module('app').controller('mainCtrl', mainCtrl);

在script.js的第18行，所选人员在那里，但我无法将其传递回主控制器。

Answer 1

//代码在这里

var selectModal = function ($modal) {
   function show(personList) {
        var modalOptions = {
            templateUrl: "select-modal.html",
            controller: selectModalInstanceCtrl,
            controllerAs: "modal",
            windowClass: "ab-modal-window",
            resolve: {
                personList: function () { return personList; }
            }
        };
        var modalInstance = $modal.open(modalOptions);
        return modalInstance;
    }

    return {
        show: show           
    };
};


var selectModalInstanceCtrl = function ($modalInstance, personList) {
var modalVm = this;

modalVm.personList = personList;

modalVm.selectPerson = function (person) {
    $modalInstance.close(person);
};

modalVm.ok = function () {
    $modalInstance.dismiss("ok");
};
};


var mainCtrl = function (selectModal)
{
    var vm = this;
    vm.personList = ['Tom','Dick','Harry','Jane'];
    vm.selectedPerson = null;

    vm.showSelectModal = function () {
       var modalInstance = selectModal.show(vm.personList);
       modalInstance.result.then(function (person) {
           vm.selectedPerson = person;
       });
    };
 };

 selectModalInstanceCtrl.$inject = ["$modalInstance", "personList"];
 selectModal.$inject = ['$modal'];
 mainCtrl.$inject = ['selectModal'];

 angular.module('app', ['ui.bootstrap']);
 angular.module('app').factory('selectModal', selectModal);
 angular.module('app').controller('mainCtrl', mainCtrl);

使用控制器as从Angular Bootstrap模态工厂返回选择

1 个答案: