javascript - Angular/Bootstrap - 模式不显示(仅背景变化)

Question

我创建了一个指令，其中包含一个按钮并且它是模态的。因为它在同一页面上使用了两次，所以我必须设置一些传递给模板的附加属性，以便我可以设置唯一的 ID。但是，当我单击按钮显示模式时，它只会更改 div 以使用背景。它不显示模式。

指令

  <div class="col-md-4">
      <qas-modal-find-postcode address="record.Address" town="record.Town" county='record.County' post-code="record.Postcode" div="#contactDetailsPostcode" id="contactDetailsPostcode"></qas-modal-find-postcode>
  </div>

你可以看到我传递了一个带 # 的字符串和一个不带 # 的字符串，我将在指令的 HTML 中使用这些作用域变量。

myAppModule.directive('qasModalFindPostcode', ['genericService', 'commonUtilities',
    function (genericService, commonUtilities) {
        return {
            templateUrl: 'Scripts/app/shared/qas/tmplModalQasPostcode.html',
            scope: {
                postCode: '=',
                address: '=',
                town: '=',
                county: '=',
                id: '@',
                div: '@',
            },
            controller: [
                '$scope', function ($scope) {
                 $scope.doSearch = function () {
                     genericService.doQueryByObj("qas", "postcode", null, null, { Address: $scope.address, Town: $scope.town, County: $scope.county }).then(function (data) {
                      $scope.addresses = data;
                      if ($scope.addresses == 0 || $scope.addresses == undefined) {
                         commonUtilities.addAlert('No Postcodes Found', 'info');
                       }
                  });
             }
                               $scope.selectPostcode = function (postcode) {
                                   $scope.postCode = postcode;
                               }
                           }
            ]
        }
    }]);
})();

HTML

<div tooltip="Find Postcode Requires Address, Town & Country">{{id}}{{div}}
<input type="button" class="btn btn-primary btn-sm" value="Get Postcodes" ng-click="doSearch()" data-toggle="modal" data-target="{{div}}" ng-disabled="
   address == undefined || address.length == 0 ||
   county == undefined || county.length == 0 ||
   town == undefined || town.length == 0" />

<div class="modal fade" id="{{id}}" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Postcodes for {{address}} <span class="glyphicons glyphicons-home"></span></h4>
                </div>
                <div class="modal-body">
                    <ul ng-repeat="item in addresses">
                        <li class="btn-link list-unstyled">
                            <a href="" ng-click="selectPostcode(item.Postcode)" data-dismiss="modal" data-backdrop="false">{{item.Address}},&nbsp;{{item.Town}},&nbsp;{{item.Postcode}}</a>
                        </li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" data-backdrop="false">Close</button>
                </div>
            </div>
        </div>
    </div>

我想在我的按钮数据目标中设置=“#string”，然后在我的模式中它有“string”而没有散列。

但是它不起作用，我不明白为什么。

Answer 1

• 如果 Id 是 static ，则应写为 'Id'

  HTML

  <div class="modal fade" id="id" tabindex="-1" role="dialog">
  
   <input type="button" class="btn btn-primary btn-sm" value="Get Postcodes" ng-click="doSearch()" data-toggle="modal" data-target="#id" ng-disabled="/>
  

• 如果 Id 是动态的，则 id={{id}}

  HTML

   <input type="button" class="btn btn-primary btn-sm" value="Get Postcodes" ng-click="doSearch()" data-toggle="modal" data-target="#{{id}}" ng-disabled="/>
  

尽管如此，id 始终是静态的。