Question

我需要使用AngularJS在模态外部显示模态中给出的值。 Plunker attached here清楚地解释了这一点。任何人都可以帮助我........我已经检查过Angular，Ui-Bootstrap网站，但找不到问题的解决方案

HTML

   <div ng-controller="ModalDemoCtrl as $ctrl" class="modal-demo">
<script type="text/ng-template" id="myModalContent.html">
                <div class="modal-header">
                    <button type="button" class="close" aria-hidden="true" ng-click="$ctrl.cancel()">&times;</button><a>
                        <h3 class="modal-title" id="modal-title" style="color:red">Please Provide the Details Here</h3>
                    </a>
                </div>
                <form name="modalForm" novalidate>
                    <div class="modal-body">
                        <div class="form-group" ng-class="{ 'has-error': modalForm.name.$invalid }">   <!--modalForm.name.$touched &&--> 
                            <a>*Name: </a><input name="name"  ng-minlength="3" 
    ng-maxlength="8" ng-model="name" type="text" placeholder="Name" class="form-control" size="10"  style="width: 50%" required />   


                        </div>
                        <div class="form-group" ng-controller="ButtonsCtrl">
                            <a>*Gender: </a><pre>{{radioModel || 'null'}}</pre>
                            <div class="btn-group">
                                <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Male'" uncheckable>Male</label>
                                <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Female'" uncheckable>Female</label>
                            </div>
                        </div>
                        <div class="input-group" ng-controller="DatepickerPopupDemoCtrl">
                            <a>*Birth Date: Selected date is: <em>{{dt | date:'fullDate' }}</em></a><select class="form-control" ng-model="format" ng-options="f for f in formats" style="width: 50%"><option></option></select><input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" close-text="Close" ng-required="true" alt-input-formats="altInputFormats" style="width: 50%" />

                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
                            </span>
                        </div>
                        <p ng-show="modalForm.modalPlace.$error.required">Select service</p>
                        </div>

                        </div>
                    <div class="modal-footer">
                        <button class="btn btn-warning" type="button" ng-click="$ctrl.ok()" ng-disabled="modalForm.$invalid">OK</button>
                        <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
                    </div>
                </form>
            </script>

<button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open me!</button>

<div ng-show="$ctrl.selected">Name from the modal: {{ $ctrl.name }}</div>
<div ng-show="$ctrl.selected">Gender from the modal: {{ radioModel || 'null'}}</div>
<div ng-show="$ctrl.selected">DOB from the modal: {{ dt | date:'fullDate' }}</div>

Answer 1

您正在寻找的是modalInstance.result属性，它是一个在您关闭模式时使用值解析的承诺（或在您解除模式时拒绝）。

文档已经为您提供了一个简单的示例

modalInstance.result.then(function (selectedItem) {
  $ctrl.selected = selectedItem;
}, function () {
  $log.info('Modal dismissed at: ' + new Date());
});

在模态控制器中，您可以使用这些方法关闭/关闭模态

var selectedItem = ...
$uibModalInstance.close(selectedItem)
// or
$uibModalInstance.dismiss(selectedItem)

将selectedItem传递给启动模态的控制器。

因为您的代码不完整，我无法为您提供更多帮助，docs可以确保您需要知道所有内容。

如何使用angularJS在模态外部的模态中显示所选项目/值/详细信息

1 个答案: