Restart list after modal closure

Question

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> 

There is a trademark with 2 buttons on this list; edit and delete. The “Edit” button opens a modal brand editing form:

 <%@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> 

Modifications are saved in the modal save button and the modal is closed.

I want to reload the list after closing. How can I do it? The list and modality controllers are different.

How to reload modal background after closing it?

Answer 1

You can broadcast the communication method.

try it

In a modal controller where the close button is running

 $rootScope.$broadcast('updateList'); 

If you want to transfer data from modal

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

In the data controller

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

If you transferred data from modal

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

Answer 2

If you are using angular UI $modal Service, then this is pretty simple. The open() method of the $modal service returns a promise in close and cancel modal.

Let's 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 call $modal.open from the list controller itself, you have access to the `promise 'only in the list controller, and from there you can easily call your function to reload the list.