Question

我想在一个将在boostrap模式中打开的形式使用bootstrap下拉列表。

<div class="modal fade box-sizing" id="createPerson">
<form  enctype="multipart/form-data" method="post" name="personCreateForm" novalidate>
   <div class="modal-header box-sizing">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <span class="lead"><h4>{{$parent.data.operation}}</h4></span>
   </div>

   <div class="modal-body box-sizing">
        <div class="form-horizontal">
            <div class="control-group">     
                <label class="control-label">Name the branch:</label>
                <div class="controls">
                    <input name="branchName" type="text" placeholder="Name the branch" id="textField"
                            ng-model="$parent.data.branchName" autocomplete="off">
                    <span class="dropdown" dropdown on-toggle="toggled(open)">
                        <a href class="title dropdown-toggle ng-binding" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-chevron-down"></i>
                        </a>
                        <ul class="dropdown-menu" style="left: inherit !important;">
                            <li>                    
                                <a ng-click="changeBranchName()">{{$parent.data.branchListData[0]}}</a>
                            </li>
                        </ul>
                    </span>
                </div>
            </div>
        </div>
    </div>  
    <div class="modal-footer box-sizing">
        <button type="button" ng-click=""               
            ng-class="{'tbt-btn':true, 'primary-btn':true}">Save</button>
        <button type="button" data-dismiss="modal" aria-hidden="true" class="btn tbt-btn secondary-btn" ng-click="close()">
             Cancel
        </button>
    </div>
</form>
</div>

javascript -

 $('#createPerson').modal({
                show: true,
                keyboard: false,
                backdrop: 'static'
            });

但是，它显示了我的空下拉列表，即使我在＆＃39; $ parent.data.branchListData＆＃39;中有值。有时（很少）它有效。如果我在没有模态的情况下直接在父html中复制粘贴相同的代码，它就可以了。 Plunker

Answer 1

简易解决方案：默认情况下，模态范围为$rootScope。在创建模态时，必须通过执行以下操作将scope属性设置为当前范围：

$scope.openModal = function(){
    var modalInstance = $uibModal.open({
        templateUrl: "xxxx",
        controller: "modalController",
        scope: $scope
    });
};

这也会导致您不需要父

但通常你不希望你的模态可以访问所有父数据。然后，当您使用resolve属性打开模态时，您需要将数据传递给模态。例如

$scope.openModal = function(){
    var modalInstance = $uibModal.open({
        templateUrl: "xxxx",
        controller: "modalController",
        resolve: {
            myData: function(){
                return $scope.myData;
            }
        }
    });
};

创建一个modalController，在其中注入已解析的数据。像这样：

angular.module("app.controllers").controller("modalController"["$modalInstance","$scope", "myData", modalController]);
function modalController($modalInstance,$scope, myData){
   $scope.myData = myData;
}

Bootstrap下拉列表无法在bootstrap模式下工作

1 个答案: