Angularjs: pass variable between controlers and reloading data - angularjs

Question

In my application the user can do a search. When the search field is filled, a query is executed and a loading message appears until the complete execution of the request. This part is working perfectly.
I'm trying to pass the search string to another controller in order to come back on the main part with the previous results. This is working too but I don't know if I have used the best way...
MY PROBLEM: when I come back on the main part (search section), during the data reloading, the loading message is not displayed anymore, could you please help me to solve and update the code ?
Here my controller:
var app=angular.module('ContactsApp', ['ngRoute', 'ui.bootstrap', 'ngDialog']);
app.config(function($routeProvider, $httpProvider, ngDialogProvider){
$httpProvider.defaults.cache = false;
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
// disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
ngDialogProvider.setDefaults({
className: 'ngdialog-theme-default',
plain: false,
showClose: true,
closeByDocument: true,
closeByEscape: true,
appendTo: false,
preCloseCallback: function () {
console.log('default pre-close callback');
}
});
//$httpProvider.requestInterceptors.push('httpRequestInterceptorCacheBuster');
// Add the interceptor to the $httpProvider to intercept http calls
$httpProvider.interceptors.push('HttpInterceptor');
$routeProvider.when('/all-contacts',
{
templateUrl: 'template/allContacts.html',
controller: 'ctrlContacts',
})
.when('/view-contacts/:contactId',
{
templateUrl: 'template/viewContact.html',
controller: 'ctrlViewContacts'
})
.otherwise({redirectTo:'/all-contacts'});
});
app.factory('httpInterceptor', function ($q, $rootScope, $log) {
var numLoadings = 0;
return {
request: function (config) {
numLoadings++;
// Show loader
$rootScope.$broadcast("loader_show");
return config || $q.when(config)
},
response: function (response) {
if ((--numLoadings) === 0) {
// Hide loader
$rootScope.$broadcast("loader_hide");
}
return response || $q.when(response);
},
responseError: function (response) {
if (!(--numLoadings)) {
// Hide loader
$rootScope.$broadcast("loader_hide");
}
return $q.reject(response);
}
};
})
app.config(function ($httpProvider) {
$httpProvider.interceptors.push('httpInterceptor');
});
//LOADING ICON DURING LOADING DATA
app.directive("loader", function ($rootScope) {
return function ($scope, element, attrs) {
$scope.$on("loader_show", function () {
return element.show();
});
return $scope.$on("loader_hide", function () {
return element.hide();
});
};
}
)
//DIRECTIVE FOR PASSING A VARIABLE BETWEEN CONTROLER
app.factory('MyTextSearch', function() {
// private
var value = '';
// public
return {
getValue: function() {
return value;
},
setValue: function(val) {
value = val;
}
};
})
app.controller('ctrlContacts', function ($scope, MyTextSearch, ContactService){
$scope.searchText = "Search Name...";
console.log("INIT SEARCH:" + MyTextSearch.getValue() );
$scope.contacts=null;
$scope.searchButtonText = "Search";
$scope.test = false;
$scope.reSearch = function () {
// Do your searching here
// simulate search
$timeout(function () {
// search is complete
}, 2000);
}
function searchContact(searchText) {
// GET THE VALUE OF THE VARIABLE PASS TO THE CONTROLERS
MyTextSearch.setValue(searchText);
console.log("NEW SEARCH:" + searchText);
if (!searchText.length) {
$scope.stringToSearch="Search Name...";
}
if (searchText.length>2) {
$scope.loading = true;
$scope.test = true;
$scope.searchButtonText = "Loading...";
ContactService.fastSearch(searchText).success(function(contacts){
var length = contacts.length;
$scope.loading = false;
if (length == 0) {
$scope.searchButtonText = "No result";
}else {
$scope.searchButtonText = length + " results found";
}
// For the orderby date
for (var i=0; i<length; i++) {
if(contacts[i].REQUESTTRUEDATE!=""){
contacts[i].REQUESTTRUEDATE = new Date(contacts[i].REQUESTTRUEDATE.replace(/-/g,"/"));
}else{
contacts[i].REQUESTTRUEDATE=null;
}
}
$scope.contacts = contacts;
$scope.selIdx= -1;
$scope.selContact=function(contact,idx){
$scope.selectedContact=contact;
$scope.selIdx=idx;
window.location="#/view-contacts/" + idx;
}
$scope.isSelContact=function(contact){
return $scope.selectedContact===contact;
}
});
}else{
$scope.contacts=null;
}
}
if(MyTextSearch.getValue().length!=0){
// When come back on the result lists
var stringToSearch = MyTextSearch.getValue();
$scope.search = searchContact(stringToSearch);
//Usefull for reloading query if stringToSearch is updated
$scope.search = function(stringToSearch){
searchContact(stringToSearch);
}
}else{
// New search
$scope.search = function(searchText){
searchContact(searchText);
}
}
// recherche
$scope.searchText = null;
$scope.razRecherche = function() {
$scope.searchText = null;
console.log("RAZ");
MyTextSearch.setValue('');
$scope.contacts=null;
}
});
app.controller('ctrlViewContacts', function ($scope, $routeParams, MyTextSearch, ContactService, RequestService, ReportService){
// GET THE VALUE OF THE PREVIOUS SEARCH
$scope.searchText = MyTextSearch.getValue();
console.log("SEARCHTEXT: " + $scope.searchText );
$scope.contact = null;
ContactService.loadPersonById($routeParams.contactId).success(function(contact){
$scope.contact = contact;
});
});
Here my view:
<h3>View all contacts</h3>
<div class="spacer input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</div>
<input type="text" ng-model="searchText" class="form-control" placeholder="Search name..." ng-change="search(searchText)"/>
<div class="input-group-btn">
<button class="btn btn-default" ng-click="razRecherche()">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div>
<div ng-show="(!searchText || (searchText.length)<3) && contacts==null && !searchButtonText" id="least3Characters">
<p class="spacer center"><strong>Please enter at least 3 characters</strong></p>
</div>
<div>
<p class="spacer center" ng-show="searchText && (searchText.length)>2" >
<img src="../img/loading.gif" class="ajax-loader" ng-show="loading==true"/>
<strong>{{ searchButtonText }}</strong>
</p>
</div>
<div class="table-responsive" id="allContacts">
<table ng-show="contacts.length" class="table table-striped table-hover spacer">
<thead>
<tr>
<th class="colPerson">
Person
<span class="hSpacer" ng-class="cssChevronsTri('PERSON')"></span>
</th>
<th class="colCompany">
Company
<span class="hSpacer" ng-class="cssChevronsTri('COMPANY')"></span>
</th>
<th class="colAction">Action</th>
</tr>
</thead>
<tbody ng-repeat="contact in contacts | filter:searchText | orderBy:champTri:triDescendant"
>
<tr class="clickable">
<td class="colPerson" ng-click="selContact(contact,contact.ID)" ng-class="{sel:selIdx==$index}">{{contact.PERSON}}</td>
<td class="colCompany" ng-click="selContact(contact,contact.ID)">{{contact.COMPANY}}</td>
<td class="colAction">
<span class="glyphicon glyphicon-pencil"></span>
<button class="inline btn btn-default" data-ng-click="confirmDelPerson(contact.ID, contact.NBREQUEST)">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
Many Thanks in advance for your help.