I have code like this with a factory:
angular.module("mainApp", ["kendo.directives"])
.factory("getFormats", function() {
var searchStr="list&John&1&1".substr(1);
//Here I see the searchStr
return {
isType: function(){
searchStr.split('&')[0];
//Here I see the searchStr
},
username: function(){
searchStr.split('&')[1];
},
dateFormatIndex: function(){
searchStr.split('&')[2];
},
languageIndex: function(){
searchStr.split('&')[3];
}
}
})
.controller("ValidationListCtrl", function( $scope,getFormats) {
var isType=getFormats.isType(); //Here I see the undefined
var username=getFormats.username();//Here I see the undefined
var dateFormatIndex=getFormats.dateFormatIndex();//Here I see the undefined
var languageIndex=getFormats.languageIndex();//Here I see the undefined
}
But i get all the variables as undefined in controller. I also have checked the factory when i get it in controller and see it with empty object
Object {}dateFormatIndex: (){arguments: nullcaller: nulllength: 0name: ""prototype: dateFormatIndex__proto__: Empty() {}<function scope>isType: (){languageIndex: (){username: (){__proto__: Object
What am i missing?
Forgot to use return in factory methods, now it should work:)
angular.module("mainApp", ["kendo.directives"])
.factory("getFormats", function() {
var searchStr="list&John&1&1".substr(1);
return {
isType: function(){
return searchStr.split('&')[0];
},
username: function(){
return searchStr.split('&')[1];
},
dateFormatIndex: function(){
return searchStr.split('&')[2];
},
languageIndex: function(){
return searchStr.split('&')[3];
}
}
})
You are not returning the values in any of the methods inside the factory. Do something like the following :
angular.module("mainApp", ["kendo.directives"])
.factory("getFormats", function() {
var searchStr="list&John&1&1".substr(1);
//Here I see the searchStr
return {
isType: function(){
return searchStr.split('&')[0];
//Here I see the searchStr
},
username: function(){
return searchStr.split('&')[1];
},
dateFormatIndex: function(){
return searchStr.split('&')[2];
},
languageIndex: function(){
return searchStr.split('&')[3];
}
}
});
This should do the trick.
Another approach is you can use modular / revealing module pattern , which helps in encapsulation as well as code readability as below
angular.module("mainApp", ["kendo.directives"])
.factory("getFormats", function() {
var _searchStr="list&John&1&1".substr(1),
_isType = function(){
return _searchStr.split('&')[0];
},
_username = function(){
return _searchStr.split('&')[1];
}
.....
return {
isType :_isType ,
username:_username
.....
}
})
so in your controller or in another service you can get it as
getFormats.username(//arguments if required)
username.isType(//arguments if required)
Related
I am calling a function in a factory and trying to inject in the controller. But I am getting an error saying, unknown provider. Please let me know where I am going wrong.
app.factory('pdfdwn', function($scope) {
return{
download:function(){
html2canvas(document.getElementById('export'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500,
}]
};
pdfMake.createPdf(docDefinition).download("Table.pdf");
}
});
return download();
}
}
});
controller:
app.controller('myctrl', function($scope,pdfdwn){
$scope.pdf = function() {
var pdd = pdfdwn.download();
};
});
1.remove $scope from factory method because you cannot inject inside.
2.Remove the return download(); from the factory, because u are already returning the download.
Inside the controller:
app.controller('myctrl', function($scope,pdfdwn){
$scope.pdf = function() {
pdfdwn.download();
};
});
I am writing a Factory/Service for the first time and trying to get an image from a factory into controller but getting undefined when in the factory function for some reason.
Here is the fiddle
https://jsfiddle.net/vijay_vadlamani/2qL2Lh5r/1/
Html:-
JS:-
angular.module('myApp').factory('imageFactory', function() {
return function contentImage($scope) {
$scope.getImage = function(content) {
return getContentImage(content);
};
};
});
angular.module(myApp).controller('getImageCtrl', ['$scope', 'imageFactory', function($scope, imageFactory) {
$scope.getListImage = function(content) {
return imageFactory.getImage(content);
};
}]);
Try to declare service like this:
var app = angular.module('myApp',[]);
app.factory('imageFactory', function()
{
var service =
{
getImage: function(content)
{
return getContentImage(content);
}
};
return service
});
and use it like this:
app.controller('getImageCtrl', ['$scope','imageFactory',function($scope, imageFactory)
{
$scope.getListImage = function(content)
{
return imageFactory.getImage(content);
};
}]);
Here's demo
i have 2 controllers who are not in the same scope or have a parent child relation.
So i want to call from controlleB a function in ControllerA. In my case its a listContoller with an addItem function and i want to call this function from a addItemController somewhere else on the page after clicking submit. i know this should work with a service, but i dont know how.
app.controller("listCtrl", ["$scope", "listSvc", function ($scope, listSvc){
$scope.list.data = listSvc.load("category");
$scope.addItem = function(newitem) {
$scope.list.data.unshift(newitem);
...
}
}]);
app.controller("addItemCrtl", ["$scope", "listSvc", function ($scope, listSvc){
$scope.addItem = function() {
listSvc.addItem($scope.newItem);
}
}]);
app.service('listSvc', function() {
return{
load: function(section){
...
},
addItem: function(item){
addItem(item); <<-- call function in listController
}
}
});
UPDATE
k is this better? i put the list.data inside my service and i watch from my controller if the list change and put it on the scope from my controller that ng-repeat can do his work... is this appraoch better? or have someone better tips for me how i should do this...
app.service('listSvc', ['$http', function($http) {
var list = {};
return {
list:{
get: function () {
return list.data;
},
set: function (data) {
list.data = data;
}
},
addItem: function(item){
var response = $http.post("/api/album/"+$scope.list.section, item);
response.success(function(){
list.data.unshift(item);
console.log("yeah success added item");
}).error(function(){
console.log("buuuh something went wrong");
});
return response;
},
load: function(section){
var response = $http.get("/api/album/"+section);
response.success(function(data){
list.set(data);
list.section = section;
console.log("yeah success loaded list");
}).error(function(){
console.log("buuuh something went wrong");
});
return response;
}
};
}]);
and in my controllers i do this
app.controller("listCrtl", ["$scope", "listSvc", function ($scope, listSvc){
listSvc.load("category");
...
$scope.$watch('listSvc.list.get()', function(data) {
$scope.list.data = data;
});
...
}]);
app.controller("addItemCrtl", ["$scope", "listSvc", function ($scope, listSvc){
...
$scope.addItem = function() {
listSvc.addItem($scope.newItem);
}
...
}]);
gregor ;)
I just solved this myself! Perhaps this may help:
The function inside of my Controller:
var timeoutMsg = function() {
vm.$parent.notification = false;
};
The function inside my Service (I had to pass in $timeout as well as the name of the function from my Controller, now it works):
// original broken code:
// this.modalSend = function(vm) {
// fixed:
this.modalSend = function(vm, $timeout, timeoutMsg) {
vm.$parent.sendTransaction = function() {
// Show notification
vm.$parent.message = 'Transaction sent!';
vm.$parent.notification = true;
$timeout(timeoutMsg, 4000);
// original broken code:
// $timeout(timeoutMsg(), 4000);
};
}
var vm = $scope
Im having problem using $inject.get in angular js..
Let say i have angular services like this
app.service("serviceOne", function() {
this.dialogAlert = function() {
return 'Message One'
};
});
app.service("serviceTwo", function() {
this.dialogAlert = function() {
return 'Message Two'
};
});
app.service("serviceThree", function() {
this.dialogAlert = function() {
return 'Message Three'
};
});
And using the factory to dynamically call dialogAlert()
app.factory("alertService", function($window, $injector) {
if ($window.servicesOne) {
return $injector.get("serviceOne");
} else {
return $injector.get(["serviceTwo", "serviceThree"]);
}
});
With this kind of codes, it gives me "unknown provider".
Or is there any alternative solution for this?
Thanks guys.
injector.get takes only one service name as argument, array is not supported, you may want to do return array of service instances by doing return ["serviceTwo", "serviceThree"].map($injector.get):-
app.factory("alertService", function($window, $injector) {
var service = ["serviceOne"];
if (!$window.servicesOne) {
service = ["serviceTwo", "serviceThree"];
}
return service.map($injector.get); //To be consistent send back this as well as array
});
So with this when you inject the alertService it will return an array of dependecy(ies).
app.controller('MainCtrl', function($scope, alertService) {
// alertService will be array of dependecies.
console.log(alertService.map(function(itm){return itm.dialogAlert()}));
});
Demo
or return with a map:-
app.factory("alertService", function($window, $injector) {
var service = ["serviceOne"],
serviceObjs = {};
if (!$window.servicesOne) {
service = ["serviceTwo", "serviceThree"];
}
angular.forEach(service, function(itm){
serviceObjs[itm] = $injector.get(itm);
});
return serviceObjs;
});
I tried to create a method in the services.js :
var esServices= angular.module('esServices', []);
esServices.factory('boxItems', ['$http', function($http) {
................
}]);
esServices.factory('cartItems', ['$cookieStore', function($cookieStore) {
array = $cookieStore.get('key');
var cartItems = new function(){},
cartItems.addItem = function(itemSelected){
$cookieStore.put('key', []);
array.push(itemSelected);
$cookieStore.put('key', array);
}
}]);
in my controllers I call the service method:
esControllers.controller('esList', ['$scope','cartItems','$cookieStore',
function($scope,cartItems,$cookieStore) {
cartItems.addItem($scope.element,function(){});
};
}]);
(itemSelected is an object)
Do you Know if it is possible to pass values (objects) from Controller to Service Method in this way?
Somebody can help me!!!
esServices.factory('cartItems', ['$cookieStore', function($cookieStore) {
return {
addItem: function(itemSelected){
var array = $cookieStore.get('key');
array.push(itemSelected);
$cookieStore.put('key', array);
},
removeItem: function(){
//...
}
}
}]);
then call using
cartItems.addItem(itemSelected);
You should inject the service in the controller like
var app = angular.module('app', ['ngCookies'] );
app.factory('cartItems', ['$cookieStore', function($cookieStore) {
return {
addItems : function(){
alert('hello');
}
}
}]);
app.controller('MyController',function($scope,cartItems){
$scope.test = 'my test';
cartItems.addItems();
});
If you want to use your ugly syntax :) just return cartItems from your factory