【发布时间】：2016-12-20 13:36:19
【问题描述】：
我正在使用 Angular ui-router 和 Bootstrap Modal，这是我的代码的输出：
如您所见，模态框的背景/阴影仅适用于状态。我当前的代码是：
Index.html
<!-- title, header and everything here -->
<div class="panel-body">
<div ui-view></div>
</div>
<!-- JS and everything here -->
路由/app.js
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('products', {
url: '/products',
templateUrl: 'templates/products.html',
controller: 'ProductController'
})
$urlRouterProvider.otherwise('/dashboard');
});
products.html
<div ng-controller="ProductController">
<button class="btn" data-toggle="modal" data-target="#addProduct"><i class="fa fa-plus"></i> Add Product</button>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Product Code</th>
<th>Product Name</th>
<th>Quantity</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in products | orderBy:'product_name' |filter:searchProduct" ng-class="{'qtyLess' : p.product_quantity <= 10}">
<td>{{p.product_code}}</td>
<td>{{p.product_name}}</td>
<td>{{p.product_quantity}}</td>
<td>
<button class="btn btn-info btn-raised" ng-click="viewProduct(p.product_id)">View</button>
</td>
</tr>
</tbody>
</table>
<!-- Add Product Modal -->
<!-- Modal -->
<div class="modal fade" id="addProduct" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title">Add Product</h2>
</div>
<div class="modal-body">
<div id="horizontal-form">
<form class="form-horizontal">
<label for="name" class="col-sm-2 control-label" style="color: #e51c23">Product Code</label>
<div class="col-sm-10">
<input type="text" ng-model="productData.product_code" class="form-control" id="name">
</div>
<label for="company" class="col-sm-2 control-label" style="color: #e51c23">Product Name</label>
<div class="col-sm-10">
<input type="text" ng-model="productData.product_name" class="form-control" id="company">
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" ng-click="addProduct()" class="btn btn-raised btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
我想做的是做应该做的事；在一切之上。所以它应该是这样的：
如您所见，背景适用于整个页面。这就是我想要发生的事情。
所以我的第一个解决方法是将所有模式从products.html 放到index.html，而不是使用$scope 作为数据，我使用$rootScope。这个技巧虽然在每个页面上都有效，但我有多个模式，我不想把它全部放在 index.html 中，因为代码看起来不整洁，我必须将所有内容从 $scope 更改为 $rootScope。
有没有更简单的方法来解决这个问题？任何帮助将不胜感激。
【问题讨论】：
-
如何打开模态框，我的意思是有哪些选项？
-
@ManuelObregozo 我更新了我的帖子并添加了一些代码
-
最后一个请求，能否请您添加控制器中的 .open 方法。你用来打开模型的那个，我只是想看看选项。但最好的选择是：将模态的 html 放在外部文件中。然后在调用模式时指定该 url。
-
@ManuelObregozo 我的控制器中没有 .open 方法，因为您可以看到按钮 data-target="#addProduct" 并且模式也在那里。即使我在控制器中使用 ng-click 和 .open 方法，它也会输出相同的结果。
-
我明白了，我的错。问题是，如果您将模态附加到该视图（html），则添加不透明度的类 .fade.in 将应用于您定义模态 html 的父。
标签： javascript angularjs twitter-bootstrap angular-ui-router bootstrap-modal