引导下拉菜单在引导模式下不起作用

Question

我想在一个表单中使用引导下拉菜单，该表单将以 boostrap 模式打开。

<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' 中有值，它也会向我显示空下拉列表。有时（很少）它可以工作。如果我在没有 modal 的情况下直接在父 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;
}