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>

Yu可以看到我传递一个带＃和一个没有的字符串，我将在指令的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>

我想设置我的按钮数据target =“#string”然后在我的模态中它有“string”而没有哈希。

然而它不起作用，我不明白为什么。

Answer 1

如果Id是静态的，则应将其写为“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始终是静态的。

Answer 2

HTML

data target = "#id"  as modal div has id ={{id}}

angular / bootstrap - 不显示模态（仅限背景更改）

2 个答案: