Say i have the following factory:
app.factory("categoryFactory", function (api, $http, $q) {
var selected = null;
var categoryList = [];
return {
getList: function () {
var d = $q.defer();
if(categoryList.length <= 0){
$http.get(api.getUrl('categoryStructure', null))
.success(function (response) {
categoryList = response;
d.resolve(categoryList);
});
}
else
{
d.resolve(categoryList)
}
return d.promise;
},
setSelected: function (category) {
selected = category;
},
getSelected: function () {
return selected;
}
}
});
now i have two controllers using this factory at the same time. Because of this both controllers has to be notified when updated for this i attempted the following:
app.controller('DashboardController', ['$http', '$scope', '$sessionStorage', '$log', 'Session', 'api','categoryFactory', function ($http, $scope, $sessionStorage, $log, Session, api, categoryFactory) {
$scope.selectedCategory = categoryFactory.getSelected();
}]);
While my other controller looks like this:
app.controller('NavController', ['$http', '$scope', '$sessionStorage', '$log', 'Session', 'api', 'FileUploader', 'categoryFactory', function ($http, $scope, $sessionStorage, $log, Session, api, FileUploader, categoryFactory) {
$scope.categories = [];
categoryFactory.getList().then(function (response) {
$scope.categories = response;
});
$scope.selectCategory = function (category) {
categoryFactory.setSelected(category);
}
}]);
how ever when the NavController changed the value it was not changed in the DashboardController
My question is how can i either watch or in another way get notified when the value changes?
You can use an observer pattern, like so:
app.factory("categoryFactory", function (api, $http, $q) {
// the list of callbacks to call when something changes
var observerCallbacks = [];
// ...
function notifyObservers() {
angular.forEach(observerCallbacks, function(callback) {
callback();
});
}
return {
setSelected: function (category) {
selected = category;
// notify the observers after you change the value
notifyObservers();
},
registerObserver: function(callback) {
observerCallbacks.push(callback);
}
}
});
And then in your controllers:
app.controller('NavController', ['$http', '$scope', '$sessionStorage', '$log', 'Session', 'api', 'FileUploader', 'categoryFactory', function ($http, $scope, $sessionStorage, $log, Session, api, FileUploader, categoryFactory) {
// ...
// init
(function() {
categoryFactory.registerObserver(function() {
categoryFactory.getList().then(function (response) {
$scope.categories = response;
});
});
})();
}]);
This way, any time setSelected is called, it calls each callback that you've registered in observerCallbacks. You can register these from any controller since factories are singletons and they will always be in the know.
Edit: just want to add that I may have put the notifyObservers() call in the wrong area (currently in setSelected) and that I may be putting the wrong update call in the controller (currently getList) but the architecture remains the same. In the registerObserver, put whatever you want to do when the values are updated and wherever you make changes that you want observers to know about call notifyObservers()
You could follow dot rule here so that prototypal inheritance will get followed.
Basically you need to have one object inside your service that will have selected variable, And will get rid of getSelected method.
Factory
app.factory("categoryFactory", function(api, $http, $q) {
var categoryFactory = {};
categoryFactory.getList = function() {
var d = $q.defer();
if (categoryList.length <= 0) {
$http.get(api.getUrl('categoryStructure', null))
.success(function(response) {
categoryList = response;
d.resolve(categoryList);
});
} else {
d.resolve(categoryList)
}
return d.promise;
}
categoryFactory.setSelected = function(category) {
categoryFactory.data.selected = category;
}
categoryFactory.data = {
selected: null
}
return categoryFactory;
});
Controller
app.controller('DashboardController', ['$http', '$scope', '$sessionStorage', '$log', 'Session', 'api', 'categoryFactory',
function($http, $scope, $sessionStorage, $log, Session, api, categoryFactory) {
//this will provide you binding without watcher
$scope.selection = categoryFactory.data;
}
]);
And then use {{selection.selected}} on html part will update a value when changes will occur in selection.
Related
Here Demo Link
Here I attached the sample program for service call. In that Am facing the problem first time not getting the value properly.
1st time invocation:
2nd or more invocation:
May I know what was the problem? and help me to fix.
And why count executed first and datalength executed second?
$http.get is calling async by default. We have to use promise to make it sync. Use this updated code refer to Plunker:
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', '$location', '$filter', 'sampleService', '$http', function ($scope, $location, $filter, sampleService, $http) {
$scope.getCount = function () {
sampleService.getFile().then(function (data) {
var dt = data.PRTGetSlotsBySessionResult;
var count = $filter('filter')(dt, { "N": null });
alert(JSON.stringify(count.length));
});
}
}]);
app.factory('sampleService', ['$http', '$filter', '$q', function ($http, $filter, $q) {
return {
object: '',
makeRequest: function (url) {
// Create the deffered object
var deferred = $q.defer();
$http.get(url).then(function (resp) {
deferred.resolve(resp.data);
});
return deferred.promise;
},
getFile: function () {
if (!this.object) {
this.object = this.makeRequest("file.json");
}
// Return the myObject stored on the service
return this.object;
}
};
}]);
I tried to call function defined in a service.
var app = angular.module('title', ['flash', 'ngAnimate', 'ngRoute'],
function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
})
.service('getWidgets', function (globalServices, $http) {
var getData = function() {
var getWidgetUrl = globalServices.baseUrl + "admin/widget/list-text-widget";
return $http({method:"GET", url:getWidgetUrl})
.then(function(result){
return result.data;
});
};
return { getData: getData };
});
Calling section
var widget = getWidgets.getData()
.then(function (result) {
$scope.widgets = result;
$scope.$apply();
});
But it return an error getWidgets.getData is not a function.
What would be the root cause?
Change with this:
angular.module('dss')
.controller('widgetCtrl',
['$scope', '$compile', '$window', '$location', '$http', 'globalServices', 'getWidgets', 'Flash', '$timeout', '$sce', '$routeParams', widgetCtrl]);
function widgetCtrl($scope, $compile, $window, $location, $http, globalServices, getWidgets, Flash, $timeout, $sce, $routeParams) {
var widget = getWidgets.getData();
widget.then(
function (result) {
$scope.widgets = result; $scope.$apply();
});
}
EDIT: if you want an advice, use this syntax:
widgetCtrl.$inject = ['$scope', '$compile', '$window', '$location', '$http', 'globalServices', 'getWidgets', 'Flash', '$timeout', '$sce', '$routeParams'];
angular.module('dss').controller('widgetCtrl', widgetCtrl);
function widgetCtrl($scope, $compile, $window, $location, $http, globalServices, getWidgets, Flash, $timeout, $sce, $routeParams) {
var widget = getWidgets.getData();
widget.then(
function (result) {
$scope.widgets = result; $scope.$apply();
});
}
You are using a service and returning an object on its constructor.
Services get initialized as
new yourFunction and factories as yourFunction().
Switch it from service to factory and it will work.
EDIT: If you want to keep using a service, try this.
Note I changed the name of the service
function GetWidgetsService($http, globalServices){
this._$http = $http;
this._globalServices = globalServices;
}
GetWidgetsService.prototype.getData = function() {
var getWidgetUrl = this._globalServices.baseUrl + "admin/widget/list-text-widget";
// Angular $http() and then() both return promises themselves
return this._$http({method:"GET", url:getWidgetUrl}).then(function(result){
// What we return here is the data that will be accessible
// to us after the promise resolves
return result.data;
});
};
angular.module('yourModule').service('getWidgetsService', GetWidgetsService);
EDIT 2: For completeness, here is your fixed factory
angular.module('yourModule').factory('getWidgetsFactory', function ($http, globalServices) {
return {
getData: function () {
var getWidgetUrl = globalServices.baseUrl + 'admin/widget/list-text-widget';
// Angular $http() and then() both return promises themselves
return $http({method: 'GET', url: getWidgetUrl}).then(function (result) {
// What we return here is the data that will be accessible
// to us after the promise resolves
return result.data;
});
}
};
});
EDIT 3: HERE is a JSBin with your code working with my first solution.
Try this way
.service('getWidgets', function (globalServices, $http) {
return { getData: function() {
var getWidgetUrl = globalServices.baseUrl + "admin/widget/list-text-widget";
// Angular $http() and then() both return promises themselves
return $http({method:"GET", url:getWidgetUrl}).then(function(result){
// What we return here is the data that will be accessible
// to us after the promise resolves
return result.data;
});
};
};
});
Controller Code
'use strict';
angular.module('MyApp').controller('ArticleContribEmailController', [
'$scope', 'ArticleAppState', 'fbsUserDataService', 'contribEmailService',
function ($scope, ArticleAppState, fbsUserDataService, contribEmailService ) {
this.userChanged = function () {
if (fbsUserDataService.initialized && fbsUserDataService.user && ArticleAppState.page_data) {
// user has authenticated.
contribEmailService.initForm();
}
};
// watch for when user data is available, run userChanged.
$scope.$watch(function() { return fbsUserDataService.user; }, this.userChanged);
$scope.$watch(function() { return fbsUserDataService.initialized; }, this.userChanged);
}
]);
Service Code
'use strict';
angular.module('forbesArticleApp').service('contribEmailService', [
'$injector', '$route', 'ArticleAppState', 'fbsUserFormFactory', 'fbsUserDataService',
function initForm ($injector, $route, ArticleAppState, fbsUserFormFactory, fbsUserDataService) {
console.log("Hello world!");
}
]);
I only want to fire the contribEmailService.initForm() function from the call in my controller, but it is firing as soon as the page loads.
How do I set when the service function initForm() is called?
Here is the corrected service code:
'use strict';
angular.module('forbesArticleApp').service('contribEmailService', [
'$injector', '$route', 'ArticleAppState', 'fbsUserFormFactory', 'fbsUserDataService',
function($injector, $route, ArticleAppState, fbsUserFormFactory, fbsUserDataService) {
return {
initForm: function() {
console.log("Hello world!");
}
};
]);
The service function is a factory that will in turn return the actual service. So it will run the first time it is requested as a dependency. The way you had it written, in fact, contribEmailService would have been undefined within your function, because your factory didn't actually return anything.
Hope this helps!
controller:-
blogcontroller is controller name
app.controller('blogController', function($scope, $compile, $http, blogAuth, AppInfo, $location,$element){
$scope.blog_abuse = function(blog_id)
{
blogAuth.BlogAbuse(blog_id).then(function(response)
{
$scope.DetailblogList.is_abused = response.records.is_abused;
},function(error){
});
}
});
service:-
app.factory('AppInfo', function(){
return {
serviceURL:site_url
};
});
app.service('blogAuth', function($http, $rootScope, $q, AppInfo){
this.BlogAbuse = function(blog_id){
var deferred = $q.defer();
var pageObj ={"blog_id":blog_id};
$http.post(AppInfo.serviceURL+'blog/blog_abuse',pageObj).success(function(data){
deferred.resolve(data);
}).error(function(msg, code) {
console.log('error', code, msg );
});
return deferred.promise;
}
});
I'm trying to call the mergeUserList() function that is inside my service. I do this is my controller that looks like this:
app.controller('UserManagementController', ['$http','$sessionStorage','api','$modal','$scope','Session', 'divisionService','$filter', function ($http, $sessionStorage, api, $modal, $scope, $state, Session, divisionService,$filter) {
divisionService.mergeUserList().then(function(response)
{
$scope.users = response;
});
}]);
And my service:
app.factory("divisionService", function (api, $http, $q) {
//Organization divisions with division users
var division = {};
var divisionArray = [];
var mergedUserList = [];
return {
mergeUserList: function () {
if (divisionArray == null || divisionArray.length == 0) {
var list = [];
var d = $q.defer();
this.getList().then(function () {
divisionArray.forEach(function (y) {
y.users.forEach(function (user) {
list.push(user);
});
d.resolve(list);
})
});
return d.promise;
}
else {
return null;
}
}
};
return division;
});
My problem is that when i run the code it says TypeError: undefined is not a function in line 1 in the controller. I know for a fact that the problem is not in the service, becuase I use it in another controller, and there it works.
You have one $state as a function argument which is not included in the array, change it to:
app.controller('UserManagementController', ['$http','$sessionStorage','api','$modal','$scope', '$state', 'Session', 'divisionService','$filter', function ($http, $sessionStorage, api, $modal, $scope, $state, Session, divisionService, $filter) {
I'm trying to insert some things into my Firebase database using a user's uid but it comes out undefined for some reason. Take a look at the code below:
The main controller that sets the user's data information (authData) when the page loads:
flickrApp.controller('mainCtrl', ['$scope', '$rootScope', '$firebase', 'Auth', 'shared', function($scope, $rootScope, $firebase, Auth, shared) {
Auth.$onAuth(function(authData) {
shared.setAuth(authData);
$scope.authData = shared.getAuth();
});
}]);
The service which handles the authentication state and shares it across my controllers:
flickrApp.service('shared', function() {
var authentication = false;
return {
getAuth: function () {
return authentication;
},
setAuth: function (auth) {
authentication = auth;
}
};
});
Here is where it doesn't work, in my tags controller. The $scope.authData is being set correctly in the $watch function but when I try to use it in the var ref line it says that $scope.authData is undefined (so therefore I can't access the uid). I can't figure out why this isn't working as it should be..
Do I have to use $apply with the watcher function as well or what is wrong?
flickrApp.controller('tagsCtrl', ['$scope', '$rootScope', '$firebase', 'shared', function($scope, $rootScope, $firebase, shared) {
$scope.tagsList = [];
$scope.shared = shared;
$scope.$watch('shared.getAuth()', function(authData) {
$scope.authData = authData;
console.log($scope.authData);
});
var ref = new Firebase ('https://flickr.firebaseio.com/users/' + $scope.authData.uid);
var sync = $firebase(ref);
$scope.addTag = function(tag) {
$scope.tagsList.push(tag);
sync.$set({favoriteTags: $scope.tagsList});
}
}]);
I think the issue is, assignment to ref is being done before the data of $scope.authData is set in $watch. Try to change your code to this:
flickrApp.controller('tagsCtrl', ['$scope', '$rootScope', '$firebase', 'shared', function($scope, $rootScope, $firebase, shared) {
$scope.tagsList = [];
$scope.shared = shared;
var ref,sync;
$scope.$watch('shared.getAuth()', function(authData) {
$scope.authData = authData;
console.log($scope.authData);
if($scope.authData){
ref = new Firebase ('https://flickr.firebaseio.com/users/' + $scope.authData.uid);
sync = $firebase(ref);
}
});
$scope.addTag = function(tag) {
$scope.tagsList.push(tag);
sync.$set({favoriteTags: $scope.tagsList});
}
}]);