twitter-bootstrap 关闭模式后重新加载列表

Reload List after Closing Modal

提问by GaripTipici

I have a list of brands:

我有一个品牌列表：

<script type="text/ng-template" id="list.brands">
        <table class="table table-striped table-bordered bootstrap-datatable datatable dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info" ng-controller="BrandsCtrl">
                    <input type="text" ng-model="searchBox">
                    <thead>
                    <tr>
                        <th><tags:label text="brandid"/></th>
                        <th><tags:label text="name"/></th>
                        <th><tags:label text="isactive"/></th>
                        <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr id="actionresult{{$index + 1}}" ng-repeat="brand in brands | filter:searchBox">
                            <td>{{brand.brandid}}</td>
                            <td>{{brand.name}}</td>
                            <td>{{brand.isactive}}</td>

                            <td>
                            <a class="btn btn-ext-darkblue btn-ext-darkblue savestockbtn" ng-click="open(brand.brandid)"><tags:label text="edit"/></a>
                            <a class="btn btn-ext-darkblue btn-modal-trigger btn-ext-darkblue savestockbtn" href="/admin.brands/deleteConfirm?brandid={{brand.brandid}}" data-toggle="modal" ><tags:label text="delete"/></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
    </script>

This list has brands line with 2 button; edit and delete. Edit button opens a modal of brand edit form:

此列表有品牌线和 2 个按钮；编辑和删除。编辑按钮打开品牌编辑表单的模式：

<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@taglib tagdir="/WEB-INF/tags" prefix="tags"%>
<%@taglib uri="/WEB-INF/tlds/fields.tld" prefix="fields"%>

 <div class="row-fluid sortable">
    <div class="box span12">
        <div class="box-content">
        <form class="form-horizontal" name="brandform" action='/admin.brands/update' data-toggle="validate" method="post">
            <fields:form formName="brand.id.form"> 
                <input type="hidden" ng-model="item.brandid" name="brandid"/>
            </fields:form> 
            <fields:form formName="brand.form">  
                <div class="section-heading"></div>
                <div class="control-group">
                    <label class="control-label" for="selectError"><tags:label text="name"/> *</label>
                    <div class="controls">

                        <input name="name" ng-model="item.name" required/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
                    <div class="controls">
                        <input type="checkbox" ng-model="item.isactive" ng-checked="item.isactive" name="isactive" value="1"/>

                    </div>
                </div>
            </fields:form> 
                <div class="form-actions">
                    <a ng-click="cancel()" class="btn btn-ext-lightblue"><tags:label text="close"/></a>
                    <a ng-click="ok()" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></a>
                </div>
        </form>
    </div>
</div>
</div>

In modal, save button saves modifications and closes the modal.

在模态中，保存按钮保存修改并关闭模态。

I want to reload the list after closing. How can I do it ? Controllers of list and modal is different.

我想在关闭后重新加载列表。我该怎么做 ？列表和模态的控制器是不同的。

How can I reload background of modal after close it ?

关闭模态后如何重新加载它的背景？

回答by Anik Islam Abhi

You can broadcast a method to communicate

您可以广播一种方法来进行通信

try like this

像这样尝试

In modal controller where close button is triggered

在触发关闭按钮的模态控制器中

$rootScope.$broadcast('updateList');

If you wanna to pass data from modal

如果你想从模态传递数据

$rootScope.$broadcast('updateList',{data : 'passing'}); // pass object in {} if you wanna to pass anything

In data Controller

在数据控制器中

$scope.$on("updateList",function(){
   // Post your code
});

If you passed data from modal

如果您从模态传递数据

$scope.$on("updateList",function(e,a){
       // Post your code
   console.log(a.data);
});

回答by Yashika Garg

If you are using angular UI $modalService, then its pretty simple. The open()method of $modalservice returns a promise on closeand cancelof the modal.

如果您使用的是 angular UI$modal服务，那么它非常简单。该open()方法$modal服务于返回一个承诺close和cancel模态的。

Lets say

可以说

var myModal = $modal.open({
   animation: true,
   templateUrl: 'editForm.html',
   backdrop: 'static',
   keyboard: false,
   scope: $scope

});

myModal.result.then(function(){
    //Call function to reload the list
});

As you are calling $modal.openfrom list controller itself, you have got access to `promise' in list controller only and from there you can easily call your function to reload the list.

当您$modal.open从列表控制器本身调用时，您只能访问列表控制器中的“promise”，然后您可以轻松调用您的函数来重新加载列表。