I have a problem when trying to call a variable outside a function
This is the service
app.factory('Service', function($http) {
return {
agentes: function () {
return $http.get(base_url +'/api/auth/organization/me/tasks/calendar').then(function (response) {
return response.data;
});
}
};});
within the controller I call:
loadAgents();
function loadAgents() {
Service.agentes()
.then(function(agentes){
$scope.agentes = agentes.data.trackables;
});
}
within the above function I can use $scope.agentes but not outside it ...
I dont understand exactly what is your problem but you have some "mistakes" in your code.You should do
app.factory('Service', function($http) {
return {
agentes: function () {
return $http.get(base_url +'/api/auth/organization/me/tasks/calendar');
}
}
});
Then inside your controller
app.controller('myController', ['Service', function(Service) {
function loadAgents() {
Service.agentes()
.then(function(agentes){
$scope.agentes = agentes.data.trackables;
});
}
}])
Related
Can't access the scope, for example putting {{ pagec }} on the html isn't working but when I remove blogpostservice from the controller it works fine again.
var app = angular.module('Blog', []);
app.factory('blogpostservice', ['$http', function ($http) {
this.getMoreData = function (pagecount) {
return $http.get('/api/posts/' + pagecount);
}
}]);
app.controller('MainController', ['$scope', 'blogpostservice',
function ($scope, blogpostservice) {
$scope.pagec = 1;
$scope.posts = [];
this.getMoreData = function (posts) {
blogpostservice.getMoreData(pagec).success(function () {
alert('got it successfully!!!');
}).error(function () {
alert('something went wrong!!!');
});
}
}]);
Because you had wrong factory implementation, factory should always return an object. You must have got an error in console(please check).
app.factory('blogpostservice', ['$http',
function ($http) {
function getMoreData (pagecount) {
return $http.get('/api/posts/' + pagecount);
}
return {
getMoreData: getMoreData
}
}
]);
Or you can convert your factory to service, there you need to bind data to this(context) like your were doing before.
app.service('blogpostservice', ['$http', function ($http) {
this.getMoreData = function (pagecount) {
return $http.get('/api/posts/' + pagecount);
}
}]);
Also don't use .success/.error on $http call, they are
deprecated. Instead use .then.
I have a controller and factory like below and can easily handle success..But how can I handle errors?
Controller
app.controller("draftsCtrl", ["$scope", "DashboardFactory", function ($scope, DashboardFactory) {
DashboardFactory.drafts(function (successCallback) {
$scope.rooms listings= successCallback;
});
}]);
Factory
app.factory('DashboardFactory', function ($http) {
var DashboardFactory = {};
DashboardFactory.active_listings = function (successCallback) {
$http.get('active.json').success(successCallback);
}
DashboardFactory.inactive_listings = function (successCallback) {
$http.get('inactive.json').success(successCallback);
}
DashboardFactory.drafts = function (successCallback) {
$http.get('drafts.json').success(successCallback);
}
return DashboardFactory;
});
Instead of passing callbacks around, prefer proper promises workflow. For this make your service methods return promise objects:
app.factory('DashboardFactory', function ($http) {
var DashboardFactory = {};
DashboardFactory.active_listings = function () {
return $http.get('active.json');
}
DashboardFactory.inactive_listings = function () {
return $http.get('inactive.json');
}
DashboardFactory.drafts = function () {
return $http.get('drafts.json');
}
return DashboardFactory;
});
Then use promise API to handle success (then callback) and errors (catch):
app.controller("draftsCtrl", ["$scope", "DashboardFactory", function ($scope, DashboardFactory) {
DashboardFactory.drafts().then(function (response) {
$scope.rooms_listings = response.data;
})
.catch(function() {
console.log('Error ocurred');
});
}]);
"service" looks more elegantly in this case
function DashboardFactory($http) {
this.active_listings = function () {
return $http.get('active.json');
};
this.inactive_listings = function () {
return $http.get('inactive.json');
};
this.drafts = function () {
return $http.get('drafts.json');
};
});
DashboardFactory.$inject = ['$http'];
app.factory('DashboardFactory', DashboardFactory);
unified.controller('YourteamController', function uniYourteamController($scope) {
testController.listTeams();
});
unified.controller('testController', function testController($scope) {
$scope.listTeams = function() {
//Listing process
};
});
I have two controller. I need to call a function(listTeams()) in another controller(testController). How to call this using angularjs
Go the service way. Easier to test, and more in line with 'best practices'.
angular.module('sharedService', function () {
function listTeams () {
return 'teams!';
}
angular.extend(this, {
listTeams: listTeams
})
});
angular.module('ctrl1', function ($scope, sharedService) {
angular.extend($scope, {
listTeams: sharedService.listTeams
});
});
angular.module('ctrl2', function ($scope, sharedService) {
angular.extend($scope, {
listTeams: sharedService.listTeams
});
});
You need to inject first controller as dependency to second controller. Here is how to do it.
do the following ...
unified.controller('YourteamController', function uniYourteamController($scope) {
var testController= $scope.$new();
$controller('testController',{$scope : testCtrl1ViewModel });
testController.listTeams();
});
unified.controller('testController', function($scope) {
$scope.listTeams = function() {
//Listing process
};
});
you have to make a service that will return a function that can be used in both controllers having diffrent scope.
========================================
unified.controller('YourteamController', function uniYourteamController($scope, $abc) {
$abc.listTeams();
});
unified.controller('testController', function testController($scope, $abc) {
$abc.listTeams();
});
unified.service('abc', function () {
this.listitems = function () {
}
});
Just try this
unified.controller('YourteamController', function uniYourteamController($scope) {
$scope.$parent.listTeams();
});
I have Product.js file where
var productOPS = {
GetProduct: function () {
var promiseGet = getProducts();
}};
Now I want to invoke ProductService.js
app.service('crudService', function ($http) {
///product GET
this.getProducts = function () {
return $http.get("/api/ProductsAPI");
}
///end product
});
And ProductController.js is
app.controller('crudController', function ($scope, crudService) {
GetProducts();
//Function to load all Employee records
function GetProducts()
{
productOPS.GetProduct();
} } });
How can I invoke the Service from GetProduct of Products.js and pass the value back to ProductController
Error: getProducts() is not defined.
service should return object
app.service('crudService', function ($http) {
return {
getProducts: function () {
return $http.get("/api/ProductsAPI");
}
});
and then in controller you can sue it like this:
app.controller('crudController', function ($scope, crudService) {
crudService.getProducts().then( function(response){
$scope.products = response.data
});
});
$http returns promise that's why I used then but you can do success or whatever you want
Consider this code:
beforeEach(inject(function (_User_) {
user = _User_;
}));
And this module/service:
angular.module('app.userModule', [])
.factory('User', function() {
function User(data) {
data.forEach(function (attr) {
if (data.hasOwnProperty(attr))
this[attr] = data[attr];
})
};
User.prototype.getSomeAttr() { return this.attr; }
return User;
};
How on earth can I pass 'data' into the User function constructor, using inject?
Edit: my example is derived from code here: http://sauceio.com/index.php/2014/07/angularjs-data-models-http-vs-resource-vs-restangular/