angular/bootstrap - modal doesn't display (only backdrop changes)

Question

I've created a directive with that contains a button and it's modal. Because it's used twice on the same page I've had to set some additional attributes that are passed to the template so I can set unique IDs. However when I click the button to display the modal, it only changes the div to use backdrop. It doesn't show the modal.

Directive

  <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 can see that I am passing a string with a # and one without, I am going to use these scope variables in the HTML of the directive.

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>

I want to set in my button data target = "#string" then in my modal it has "string" without the hash.

However it doesn't work and I don't understand why.

If I hardcode the id for the data-toggle and the modal it works. But I can't pass in strings? It's also succesfully setting the values because I can see them in the web developer window in chrome. — nick gowdy

saurabh saurabh · Accepted Answer · 2015-09-16T11:06:07

If Id is static , then it should be written as '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="/>

If Id is dynamic , as 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="/>

although , id is always static .

angular/bootstrap - modal doesn't display (only backdrop changes)

2 Answers