Bootstrap下拉菜单在Bootstrap模式下不起作用

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

但是，即使我在'$ parent.data.branchListData'中有值，它也会显示为空的下拉列表。有时（很少）它有效。 如果我直接将相同代码复制粘贴到父html中而不使用modal，那么它将起作用。 柱塞

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