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
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();
};
});
So I created with angular a small factory to get my local json file now I wanna pass that data to my controller but it can't find the factory name and says 'unresolved variable'.
Here is the snippet of my code what I guess is relevant for now.
(function () {
var app = angular.module('locatieTool', ['ngRoute']);
app.controller('teamController', function ($scope) {
function init () {
dataFactory.getTeams().success(function(data) {
$scope.teams = data
});
}
init();
console.log($scope.teams);
});
// factory
app.factory('dataFactory', function($http) {
var team = {};
//get local data
team.getTeams = function() {
return $http.get ('http://localhost:4040/');
};
return team;
});
})();
My goal is just to console log the $scope.teams, than I can do more with the data.
you should include "dataFactory" inside your controller
(function () {
var app = angular.module('locatieTool', ['ngRoute']);
app.controller('teamController', function ($scope, dataFactory) {
function init () {
dataFactory.getTeams().success(function(data) {
$scope.teams = data
});
}
init();
console.log($scope.teams);
});
// factory
app.factory('dataFactory', function($http) {
var team = {};
//get local data
team.getTeams = function() {
return $http.get ('http://localhost:4040/');
};
return team;
}); })();
I believe you need to pass your factory into the controller:
app.controller('teamController', function ($scope, dataFactory) {
function init () {
dataFactory.getTeams().success(function(data) {
$scope.teams = data
});
}
init();
console.log($scope.teams);
});
I'm very new to AngilarJS. I am trying to write a service in angularJS.
<script>
var module = angular.module("myapp", []);
module.service('BrandService', function ($http) {
var brands = [];
this.getBrands = function()
{
return $http.get('http://admin.localhost/cgi-bin/brand.pl')
.then(function(response)
{
brands = response.brands;
alert (brands);
});
}
//simply returns the brands list
this.list = function ()
{
return brands;
}
});
module.controller("brandsController", function($scope, BrandService) {
$scope.brandlist = BrandService.list();
alert ($scope.brandlist);
});
</script>
The statement "alert (brands);" is not getting called. What is the issue with this code. Is m missing any thing in implementation?
$http calls are always async. Meaning, even you do a .then at your service, there is no way it will properly the resolved data back into your controller. You will have to write it in your controller.
Your Service:
module.service('BrandService', function($http) {
var brands = [];
this.getBrands = function() {
//do not need the dot then.
return $http.get('http://admin.localhost/cgi-bin/brand.pl')
}
//simply returns the brands list
this.list = function() {
return brands;
}
});
In your controller:
module.controller("brandsController", function($scope, BrandService) {
BrandService.list()
.then(function(response) {
$scope.brandlist = response.brands;
alert($scope.brandlist);
});
});
In service:
this.getBrands = function() {
$http.get('http://admin.localhost/cgi-bin/brand.pl').then(function(response) {
brands = response.brands;
alert(brands);
return brands;
});
}
In controller:
$scope.brandlist = BrandService.getBrands();
alert($scope.brandlist);
This type of decorator works with services and factories. I expected it to work with providers as well. I've tried the following to decorate ui-router's $stateProvider:
app.config(function($provide) {
$provide.decorator('$state', function ($delegate) {
return $delegate;
});
});
Here's a demo plunk
It should work just the same? See plunk # http://plnkr.co/edit/rSFo1xCoRHjWmrSjJBN1
var app = angular.module('plunker', []);
app.provider('provider', function () {
this.$get = function () {
var provider = {};
var value = 'test';
provider.get = function() {
return value;
}
provider.set = function(param) {
value = param;
}
return provider;
}
});
app.config(function($provide) {
$provide.decorator('provider', function ($delegate) {
$delegate.set('delegate');
return $delegate;
});
});
app.controller('MainCtrl', function($scope, provider) {
$scope.name = provider.get();
});
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