ui-view

Question

我正在使用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">&times;</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改为{ {1}}。

有没有更简单的方法来解决这个问题？任何帮助将不胜感激。

Answer 1

尝试将模式打开为外部文件。否则，如果将模态附加到该视图（html），则添加不透明度的类.fade.in将应用于您定义模态html的父级。

在您的控制器ProductController中，您将拥有以下内容：

$uibModal.open({
      templateUrl: 'myModalContent.html'
    });

myModalContent.html与您在此处的代码相同：

<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">&times;</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>

请查看此plunker，并举例说明如何解决此问题： https://plnkr.co/edit/LgokUqXxCg1shegBy2GZ?p=preview