We Keep Coding

Pass variable from config to factory in AngularJS and UI Router

I'm trying to make a search in an http call with a different value depending on the view that I'm in.
My factory looks like this:
.factory('SearchService', ['$http','$filter', function($http, $filter) {
var service = {
getAllExhibitors : function () {
var searchindex = 'Berliner';
var url = '...';
var config = {
params: {
search: searchindex
},
cache:true
};
$http.get(url, config).then(function (data) {
service.datafairs = data.data.rows;
...
});
}...
As you can see I'm passing a hardcoded variable searchindex as parameter for the search.
Could I set this variable depending on the view I'm in?
My config for the router looks like this:
.config(function($stateProvider) {
var berlinerState = {
name: 'berliner',
url: '/berlinerliste/',
views: {
'header': {
templateUrl: 'header.htm'
},
'main':{
templateUrl: 'bl2017.htm'
}
}
}
var koelnerState = {
name: 'koelner',
url: '/koelnerliste/',
views: {
'header': {
templateUrl: 'header.htm'
},
'main':{
templateUrl: 'kl2017.htm'
}
}
}
...
For example, that on /berlinerliste, searchindex = X and on /koelnerliste, searchindex = Y
Any tips?

From the controller when you call your factory, you could be pass the actual state name and based on this value define the searchIndex on the getAllExhibitors method.
getAllExhibitors : function (stateName) {
var searchindex = '';
var url = '...';
var config = {
params: {
search: searchindex
},
cache:true
};
if(stateName === 'berliner'){
config.params.search = 'asdf'
}
....
$http.get(url, config).then(function (data) {
service.datafairs = data.data.rows;
...
});
}...
and from your controller inject the $state service and send to the method the value of $state.current.name
Another way it is inject the $state service directly on your service, like this:
.factory('SearchService', ['$http','$filter','$state', function($http, $filter, $state){
var service = {
getAllExhibitors : function () {
var searchindex = 'Berliner';
var url = '...';
var config = {
params: {
search: searchindex
},
cache:true
};
if($state.current.name === 'berliner') {
config.params.search = 'asdf'
}
....
$http.get(url, config).then(function (data) {
service.datafairs = data.data.rows;
...
});
}...

When working with asynchronous APIs such $http, it is best to return promises:
app.service('SearchService', function($http, $filter) {
this.getAllExhibitors = function (searchArg) {
var searchindex = searchArg || 'Berliner';
var url = '...';
var config = {
params: {
search: searchindex
},
cache:true
};
//RETURN promise
͟r͟e͟t͟u͟r͟n͟ $http.get(url, config).then(function (response) {
͟r͟e͟t͟u͟r͟n͟ response.data.rows;
});
};
});
Then in the controller, extract data from the promise:
app.controller("viewController", function($scope, SearchService, $state) {
var searchArg = $state.current.name;
var promise = SearchService.getAllExhibitors(searchArg);
promise.then(function(rows) {
$scope.rows = rows;
});
});
Also notice the the getAllExhibitors function has been modified to accept a search argument.
The return statement is a very useful thing that isn't used enough.

Angular on one of the ng models not accessible

I am working with angular and I am having this issue for a few days. When I tried to submit the form the value of my second drop down is null(selectedDocument dropdown). I posted my code a few days back but nobody could help me. That is why I am reposing the code again.
<div ng-controller="myController">
<form name="myForm" >
<div>
<select ng-model="selectedCompany">
<option value="">-- Select Company --</option>
<option data-ng-repeat="currentSetting in currentSettings" value={{currentSetting.SCACCode}}>{{currentSetting.SCACCode}}</option>
</select>
</div>
<div><input id="Text1" type="text" ng-model="enteredCustomer"/></div>
<div>
<select ng-model="selectedDocument" ng-click="getTypes()">
<option value="">-- Select Doc type --</option>
<option data-ng-repeat="docSetting in docSettings" value="{{docSetting.Doc_Type}}">{{docSetting.Doc_Type}}</option>
</select>
</div>
<input id ="btnAdd" type="button" value="Add new record" ng-click="setNewRecord()"/>
</form>
And this is my javascript
<script>
var myApp = angular.module("myApp", []);
myApp.service('companiesService', ['$http', '$q', function ($http, $q) {
var currentSettings = null;
this.getList = function () {
var def = $q.defer()
if (currentSettings) {
def.resolve(currentSettings);
} else {
$http.post('GetCompanies')
.then(function (response) {
var response = $.parseJSON(response.data)
currentSettings = response;
def.resolve(currentSettings);
});
}
return def.promise;
}
}]);
myApp.service('allCurrentSettingsService', ['$http', '$q', function ($http, $q) {
var allSettings = null;
this.getList = function () {
var def = $q.defer()
if (allSettings) {
def.resolve(allSettings);
} else {
$http.post('GetAllCurrentSettings')
.then(function (response) {
var response = $.parseJSON(response.data)
allSettings = response;
def.resolve(allSettings);
});
}
return def.promise;
}
}]);
myApp.service("deleteService", function ($http) {
this.removeRow = function (recId, compName, custName, docName) {
$http.post('DeleteRecord', { settingID: recId,companyName: compName,customerName: custName, documentName: docName } )
.success(function (data, status, headers, config) {
window.location.reload();
})
.error(function (data, status, header, config) {
});
}
});
myApp.service("setNewRecordService", function ($http) {
this.setNewRecord = function (compName, custName, docName) {
$http.post('SetCurrentRecord', { companyName: compName, customerName: custName, documentType: docName })
.success(function (data, status, headers, config) {
window.location.reload();
})
.error(function (data, status, header, config) {
});
}
});
myApp.service('getDocTypesService', ['$http', '$q', function ($http, $q) {
var docSettings = null;
this.getDocTypes = function (compName, custName) {
var def = $q.defer()
if (docSettings) {
def.resolve(docSettings);
} else {
$http.post('GetDocTypes', { companyName: compName, customerName: custName })
.then(function (response) {
var response = $.parseJSON(response.data)
docSettings = response;
def.resolve(docSettings);
});
}
return def.promise;
}
}]);
myApp.controller('myController', ['$scope', 'companiesService', 'allCurrentSettingsService','deleteService', 'setNewRecordService', 'getDocTypesService',
function ($scope, companiesService, allCurrentSettingsService, deleteService, setNewRecordService, getDocTypesService) {
$scope.currentSettings = '';
companiesService.getList().then(function (value) {
$scope.currentSettings = value;
}),
$scope.allSettings = '';
allCurrentSettingsService.getList().then(function (value) {
$scope.allSettings = value;
}),
$scope.deleteRecordFromDB = function (recId, compName, custName, docName) {
deleteService.removeRow(recId, compName, custName, docName)
},
$scope.companyName = '';
$scope.setNewRecord = function () {
setNewRecordService.setNewRecord($scope.selectedCompany, $scope.enteredCustomer, $scope.selectedDocument)
},
$scope.getTypes = function () {
getDocTypesService.getDocTypes($scope.selectedCompany, $scope.enteredCustomer).then(function (value) {
$scope.docSettings = value
});
};
}
]);

Your might have something something to do with the way angular(and Javascript for that matter) handles scopes.
The short of it is that the problem is that a child scope is breaking the connection to the parent scope(your controller variable). A simple fix is to bind your form variables to an object and refer to them with the dot notation in the view.
You can read up on this in numerous SO answers, for example here:
Why don't the AngularJS docs use a dot in the model directive?
Edit
I made a minimal working plunkr that should point you in the right direction, and here is the edited code.
myApp.controller('myController', ['$scope', 'companiesService', 'allCurrentSettingsService','deleteService', 'setNewRecordService', 'getDocTypesService',
function ($scope, companiesService, allCurrentSettingsService, deleteService, setNewRecordService, getDocTypesService) {
$scope.selections = {company: null, document: null};
$scope.currentSettings = '';
companiesService.getList().then(function (value) {
$scope.currentSettings = value;
}),
$scope.allSettings = '';
allCurrentSettingsService.getList().then(function (value) {
$scope.allSettings = value;
}),
$scope.deleteRecordFromDB = function (recId, compName, custName, docName) {
deleteService.removeRow(recId, compName, custName, docName)
},
$scope.companyName = '';
$scope.setNewRecord = function () {
setNewRecordService.setNewRecord($scope.selected.company, $scope.enteredCustomer, $scope.selected.document)
},
$scope.getTypes = function () {
getDocTypesService.getDocTypes($scope.selected.company, $scope.enteredCustomer).then(function (value) {
$scope.docSettings = value
});
};
}
]);
and html:
<div ng-controller="myController">
<form name="myForm" >
<div>
<select ng-model="selected.company">
<option value="">-- Select Company --</option>
<option data-ng-repeat="currentSetting in currentSettings" value={{currentSetting.SCACCode}}>{{currentSetting.SCACCode}}</option>
</select>
</div>
<div><input id="Text1" type="text" ng-model="enteredCustomer"/></div>
<div>
<select ng-model="selected.document" ng-click="getTypes()">
<option value="">-- Select Doc type --</option>
<option data-ng-repeat="docSetting in docSettings" value="{{docSetting.Doc_Type}}">{{docSetting.Doc_Type}}</option>
</select>
</div>
<input id ="btnAdd" type="button" value="Add new record" ng-click="setNewRecord()"/>

Is the dropdown get data or not
if not
i think in getTypes function ,can you try this
$scope.getTypes = function () {
getDocTypesService.getDocTypes($scope.selectedCompany, $scope.enteredCustomer).then(function (value) {
$scope.docSettings = value.data;
});
}

In your controller you have, for example, this:
companiesService.getList().then(function (value) {
$scope.currentSettings = value;
}),
$scope.allSettings = '';
What's the comma for?
End your call with a ; and with all the others too.
Your first select has the data from that first service call. Then it errors out because of all the comma'd functionality after it. Terminate them correctly, and then when it gets down to settings $scope.docSettings it should be correct.
myApp.controller('myController', ['$scope', 'companiesService', 'allCurrentSettingsService','deleteService', 'setNewRecordService', 'getDocTypesService',
function ($scope, companiesService, allCurrentSettingsService, deleteService, setNewRecordService, getDocTypesService) {
$scope.currentSettings = '';
companiesService.getList().then(function (value) {
$scope.currentSettings = value;
});
$scope.allSettings = '';
allCurrentSettingsService.getList().then(function (value) {
$scope.allSettings = value;
});
$scope.deleteRecordFromDB = function (recId, compName, custName, docName) {
deleteService.removeRow(recId, compName, custName, docName);
};
$scope.companyName = '';
$scope.setNewRecord = function () {
setNewRecordService.setNewRecord($scope.selectedCompany, $scope.enteredCustomer, $scope.selectedDocument)
};
getDocTypesService.getDocTypes($scope.selectedCompany, $scope.enteredCustomer).then(function (value) {
$scope.docSettings = value
});
}
]);
Something like that, my ES5 is a little rusty, but see if that works. Edited: removed the unnecessry docTypes.

Sharing Data between Controllers in AngularJS and IONIC

I'm trying to share data via a service that uses the $HTTP function between controllers. I'm trying to pass the return data in SUCCESS to another controller. Something is wrong I think in the service the data doesn't get to the second controller. below is my code can someone take a look at it and tell me what I'm doing wrong point me to the right direction on what to do.
services.js
.factory('userService', function ($http) {
var url = "url.php";
var headers = {
'Content-Type' : 'application/x-www-form-urlencoded; charset-UTF-8'
};
var params = "";
return {
getUsers : function (entry, searchTypReturn) {
params = {
entry : entry,
type : searchTypReturn,
mySecretCode : 'e8a53543fab6f5e'
};
return $http({
method : 'POST',
url : 'https://servicemobile.mlgw.org/mobile/phone/phone_json.php',
headers : {
'Content-Type' : 'application/x-www-form-urlencoded; charset-UTF-8'
},
transformRequest : function (obj) {
var str = [];
for (var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
},
data : params
})
.success(function (data, status, headers, config) {
return data;
});
}
}
})
controller.js
.controller('phoneController', function ($scope, md5, $http, userService, $ionicLoading, $location, $ionicPopup) {
userService.getUsers(form.entryText, searchTypReturn).success(function (data, status, headers, config) {
$ionicLoading.hide();
$scope.name = data.PlaceDetailsResponse.results[0].first_name;
if ($scope.name == 0) {
$scope.showAlert();
} else {
$location.path('phoneView');
$ionicLoading.hide();
}
}).error(function (data, status, headers, config) {
$scope.showAlert();
$ionicLoading.hide();
})
});
.controller('phoneViewController', function ($scope, userService) {
$scope.input = userService;
console.log('This is from phoneView', $scope.input);
});

Nasser's answer is the correct one. There are other ways of keeping track of things in memory if it is just session based.
For example there is http://lokijs.org/ which also claims that the data persist between sessions because it is written to a file as well. And it replaces SQLite.
The relationship between the controllers and the directives which get the data to be displayed from the scope of the directives are loosely coupled.
If there are no values to be displayed in the scope like {{valuetobedisplayedfromcontroller}} your html becomes funky.
There are 2 options to fix this. Either use ng-if conditionals in the html directives or encapsulate the whole controller in an if command which checks a global variable to see if the data is loaded and show a loading screen and prevent user input and return error with a timeout.
I'm very keen to learn if there are other/better solutions.

you can store received data from API in $rootScope or global var or you can store data in a factory.
example for using $rootScope
angularApp.controller('phoneController', function($scope, md5, $http, userService, $rootScope, $ionicLoading, $location, $ionicPopup) {
$rootScope.data = userService.getUsers(form.entryText,searchTypReturn).success(function(data, status, headers, config) {
$ionicLoading.hide();
$scope.name = data.PlaceDetailsResponse.results[0].first_name;
if ($scope.name == 0) {
$scope.showAlert();
} else {
$location.path('phoneView');
$ionicLoading.hide();
}
}).error(function(data, status, headers, config) {
$scope.showAlert();
$ionicLoading.hide();
})
}
});
.controller('phoneViewController', function($scope,$rootScope) {
$scope.input = $rootScope.data;
console.log('This is from phoneView',$scope.input);
})
using data factory (Recommended)
angularApp.factory('appDataStorage', function () {
var data_store = [];
return {
get: function (key) {
//You could also return specific attribute of the form data instead
//of the entire data
if (typeof data_store[key] == 'undefined' || data_store[key].length == 0) {
return [];
} else {
return data_store[key];
}
},
set: function (key, data) {
//You could also set specific attribute of the form data instead
if (data_store[key] = data) {
return true;
}
},
unset: function (key) {
//To be called when the data stored needs to be discarded
data_store[key] = {};
},
isSet: function (key) {
if (typeof data_store[key] == 'undefined' || data_store[key].length == 0) {
return false;
}else {
return true;
}
}
};
});
angularApp.controller('phoneController', function($scope, md5, $http, userService, $rootScope, $ionicLoading, $location, $ionicPopup , appDataStorage) {
var data = userService.getUsers(form.entryText,searchTypReturn).success(function(data, status, headers, config) {
$ionicLoading.hide();
$scope.name = data.PlaceDetailsResponse.results[0].first_name;
if ($scope.name == 0) {
$scope.showAlert();
} else {
$location.path('phoneView');
$ionicLoading.hide();
}
}).error(function(data, status, headers, config) {
$scope.showAlert();
$ionicLoading.hide();
});
appDataStorage.set('key1',data);
}
});
angularApp.controller('phoneViewController', function($scope,$rootScope,appDataStorage) {
$scope.input = appDataStorage.get('key1');
console.log('This is from phoneView',$scope.input);
})

AngularJs Routes + Back Button

I'm using AngularJs with Angular Routes and Phonegap to make my mobile app. It's an ecommerce app so there's a typical category page with filters and sorting and product details page.
Now the issue is whenever I'm on the product details page and click on back it forgets the sorting/filtering/pagination and basically loads the category page afresh.
Also in general how do i stop from hitting the api again when back button is clicked.
Here's how my category controller looks like.
app.controller('categoryController', function ($http, $scope, $location, $rootScope, $routeParams, $anchorScroll) {
loaderShow();
$scope.filtered = {};
$scope.minp = 0;
$scope.maxp = 0;
$scope.pdts = {};
$http.get(domain + "/get-category-products/" + $routeParams.url_key + (window.localStorage.getItem('id') != null ? "?userId=" + window.localStorage.getItem('id') : ""), {
cache: true
}).success(function (data, status, headers, config) {
$scope.products = data;
$scope.pdts = data.data
$scope.filters = data.filters;
$scope.$digest;
loaderHide();
});
$scope.load = function (event, url) {
angular.element(event.target).children("i").addClass("fa fa-spinner fa-pulse");
$http.get(url, {
params: {
'filters': $scope.filtered,
'minp': $scope.minp,
'maxp': $scope.maxp,
'slug': $routeParams.url_key,
'sort': jQuery("select.orderby").val(),
'userId': (window.localStorage.getItem('id') != null ? window.localStorage.getItem('id') : "")
},
cache: true
}).success(function (data, status, headers, config) {
$scope.products = data;
if (data.data.length > 0) {
jQuery.each(data.data, function (k, v) {
$scope.pdts.push(v);
});
angular.element(event.target).children("i").removeClass("fa fa-spinner fa-pulse");
} else {
angular.element(event.target).removeAttr("ng-click");
angular.element(event.target).text("No More Products");
}
$scope.$digest;
loaderHide();
});
};
$scope.filterProds = function (option, parent) {
if (option) {
if (!(parent in $scope.filtered))
$scope.filtered[parent] = [];
var idx = $scope.filtered[parent].indexOf(option);
if (idx > -1)
$scope.filtered[parent].splice(idx, 1);
else
$scope.filtered[parent].push(option);
if ($scope.filtered[parent].length <= 0)
delete $scope.filtered[parent];
}
};
$scope.applyFilters = function () {
$scope.minp = jQuery("#min_price").val();
$scope.maxp = jQuery("#max_price").val();
$http.get(domain + "/get-filtered-products", {
params: {
'filters': $scope.filtered,
'minp': $scope.minp,
'maxp': $scope.maxp,
'slug': $routeParams.url_key,
'sort': jQuery("select.orderby").val(),
'userId': (window.localStorage.getItem('id') != null ? window.localStorage.getItem('id') : "")
}
}).success(function (response) {
$scope.products = response;
$scope.pdts = response.data
$scope.$digest;
jQuery(".big-notification.yellow-notification").slideUp();
});
}
$scope.sizeOf = function (obj) {
return Object.keys(obj).length;
};
$scope.showFilters = function () {
jQuery(".big-notification.yellow-notification").toggle("slideDown");
}
$scope.showOptions = function (e) {
jQuery("#" + e).toggle();
}
$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
siteMainFn();
});
});
Any help would be appreciated. Thanks

How do I display data retrieved using angular?

This is my html
<form name="change_profile_form" ng-controller="profileController" id="change_profile_form"
ng-submit="changeProfileForm()">
<input id="username" ng-model="data.User.username" name="username" class="profile_input" disabled value="{{ my_profile.User.username }}" required />
This is my js:
var angularApp = angular.module("myApp", ['ngResource', 'myApp.directives']);
// MyProfile constructor function to encapsulate HTTP and pagination logic
angularApp.factory('MyProfile', function($http) {
var MyProfile = function() {
this.user = [];
this.profile = [];
// this.page = 1;
// this.after = '';
// this.perPage = 6;
// this.maxLimit = 100;
// this.rowHeight = 308;
};
MyProfile.prototype.fetch = function() {
var url = "/users/my_profile?callback=JSON_CALLBACK";
$http.defaults.headers.get = { 'Accept' : 'application/json', 'Content-Type' : 'application/json' };
$http.get(url).success(function(data, status, headers, config) {
this.user = data.user;
}.bind(this));
};
return MyProfile;
});
angularApp.controller('profileController', ['$scope', 'MyProfile', '$users', '$parse', function($scope, MyProfile, $users, $parse) {
$scope.my_profile = new MyProfile();
$scope.my_profile.fetch();
$scope.changeProfileForm = function() {
var serverMessage = $parse('change_profile_form.email.$error.serverMessage');
$users.changeProfile(
$scope.data,
function(data, status, headers, config) {
if (typeof data.error === 'undefined' || typeof data.result === 'undefined') {
alert('Server cannot be reached. Please refresh webpage and try again!');
return;
}
if (data.result != null) {
title = "Profile Saved.";
message = "Your <strong>PROFILE</strong> has been<br />successfully changed and saved.";
options = new Object();
options["box-title"] = new Object();
options["box-title"]["padding-left"] = 5;
showOverlayForSuccess(title, message, options);
}
},
function(data, status, headers, config) {
console.log(data);
// error callback
$scope.errors = data.errors;
})
}
}
I checked my network tab in chrome dev tools. The /users/my_profile in the factory is not being triggered.
Where did I get this wrong?

I adopted the logic from http://sravi-kiran.blogspot.com/2013/03/MovingAjaxCallsToACustomServiceInAngularJS.html
My changes are:
a) realize that the input is already using ng-model, hence no point to use value attribute
b) rewrite the factory and use the $q
c) inside the controller, call the factory method directly
Change a)
<form name="change_profile_form" ng-controller="profileController" id="change_profile_form"
ng-submit="changeProfileForm()">
<input id="username" ng-model="data.User.username" name="username" class="profile_input" required style="position: absolute;left:151px;top:<?php echo -138 + $difference; ?>px;"/>
Change b)
// MyProfile constructor function to encapsulate HTTP logic
angularApp.factory('MyProfile', function($http, $q) {
return {
getProfile: function() {
// creating a deferred object
var deferred = $q.defer();
var url = "/users/my_profile?callback=JSON_CALLBACK";
// prepare headers so that CakePHP can accept the call
$http.defaults.headers.get = { 'Accept' : 'application/json', 'Content-Type' : 'application/json' };
// calling the url to fetch profile data
$http.get(url).success(function(data, status, headers, config) {
// passing data to deferred's resolve function on successful completion
deferred.resolve(data);
}).error(function() {
// sending a friendly error message in case of failure
deferred.reject("An error occurred while fetching data");
});
// returning the promise object
return deferred.promise;
}// end getProfile
}// end return
});
Change c) and this is how I call the factory inside the controller
angularApp.controller('profileController', ['$scope', 'MyProfile', '$users', '$parse', function($scope, MyProfile, $users, $parse) {
function getProfile() {
MyProfile.getProfile().then(function(data) {
$scope.data = data.user;
console.log($scope.data);
},
function(errorMessage) {
$scope.error = errorMessage;
});
}
getProfile();