[英]angular/bootstrap - modal doesn't display (only backdrop changes)
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.
因为它在同一页面上使用了两次,所以我必须设置一些传递到模板的其他属性,以便设置唯一的ID。 However when I click the button to display the modal, it only changes the div to use backdrop.
但是,当我单击按钮以显示模式时,它仅将div更改为使用背景。 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. 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 的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">×</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}}, {{item.Town}}, {{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. 我想在按钮数据目标中设置=“#string”,然后在我的模式中将其包含“ string”而不包含哈希。
However it doesn't work and I don't understand why. 但是它不起作用,我也不明白为什么。
If Id is static , then it should be written as 'Id' 如果Id为static,则应将其写为'Id'
HTML 的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}} 如果Id是dynamic,则为id = {{{id}}
HTML 的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 . 尽管id始终是静态的。
的HTML
data target = "#id" as modal div has id ={{id}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.