Accessing $scope in AngularJS factory?
JavascriptAngularjsJavascript Problem Overview
I am new to AngularJS and find it very interesting, but I am a bit unclear about the following situation.
app.factory('deleteFac', function($http){
var factory = {};
factory.edit = function(id){
$http.get('?controller=store&action=getDetail&id=' + id).
success(function(data, status){
/**
got an error on the following
when i use return data; and i get data undefined
in the controller which i get it because its doing a ajax call
you don't get data until the call first.
**/
$scope.detail = data;
})
}
return factory;
})
I am getting error when I assign to $scope
and use return data, is there anyway I can assign the return data to the $scope
?
Javascript Solutions
Solution 1 - Javascript
You don't typically use $scope
inside a factory, service or provider. Usually, you would return the promise
(returned by $http
) and then handle the promise in a controller (where you do have $scope
).
factory.edit = function(id){
return $http.get('?controller=store&action=getDetail&id=' + id);
}
Controller function:
$scope.edit = function(id) {
deleteFac.edit(id).then(function(response) {
$scope.something = response.model;
});
}
Solution 2 - Javascript
I guess you meant this:
app.factory('deleteFac', function($http){
var service = {};
factory.edit = function(id, success, error){
var promise = $http.get('?controller=store&action=getDetail&id=' + id);
if(success)
promise.success(success);
if(error)
promise.error(error);
};
return service;
});
Then in your controller you do:
function MyController($scope, deleteFac){
deleteFac.edit($scope.id, function(data){
//here you have access to your scope.
});
}
Solution 3 - Javascript
The following trick is a very bad practice, but you can use it if you are in a hurry:
Exchange the $scope
with: angular.element('[ng-controller=CtrlName]').scope()
Solution 4 - Javascript
Personally I would like to use scope from the factory, so, instead of moving all out I would pass the scope as parameter from the client which is calling to the factory.function().
Also I was having this same issue when trying to use $scope.watch(...) since we cannot use directly $scope from factories or services but I wanted to have this working in this way, so that is why I just updated my function to have scope as parameter and let the factory's client to send the $scope. So, this would be my solution:
var app = angular.module("myApp", []);
app.factory('MyFactory', function($http) {
var factory = {};
//This is only for my own issue I faced.
factory.Images = {};
factory.myFunction = function(id, scope) {
//This is an example of how we would use scope inside a factory definition
scope.details = "Initial Value";
//In my case I was having this issue while using watch
scope.$watch('details' , function(newValue, oldValue) {
if(oldValue){
scope.log = "Details was updated to : " +newValue;
}
});
scope.details = "My Id is: "+id;
};
return factory;
});
//Controller: Factory's Client.
app.controller("MyController", ['$scope', 'MyFactory', function($scope, MyFactory) {
MyFactory.myFunction(5, $scope);
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<span>{{details}} </span>
<hr>
<p>{{log}} </p>
</div>
I hope this can help. Regards.
Solution 5 - Javascript
I think this is the cleanest solution:
Let me know if there is problem or improvement.
(function(){
angular.controller('controllerName', controllerName);
controllerName.$inject = ['$scope', factory];
function controllerName($scope, factory){
var vm = this;
vm.data = factory.alertPopup();
}
angular.factory('factory', factory);
factory.$inject = ['externalServices'];
function factory(externalServices){
return {
returnData : returnData
}
function returnData(){
return externalServices.whatever();
}
}
})();
Solution 6 - Javascript
.factory('POPUP', function($ionicLoading, $ionicPopup) {
var self = this;
// THIS BLOCK SCREEN ! for loading ! Be carefoull !! ( deprecated: assign this to a var for security)
self.showLoading = function(title, message, scope){
scope.loading = true;
return $ionicLoading.show({ content: message, showBackdrop: false });
};
self.hideLoading = function(title, message, scope){
scope.loading = false;
return $ionicLoading.hide();
};
// NOT BLOCK SCREEN- SIMPLE ALERTS - Standards popups
self.showAlert = function(title, message, callback){
var alertPopup = $ionicPopup.alert({ title: title, template: message });
alertPopup.then(function(res) {
console.log('callback popup');
if (callback){ callback(); }
});
};
self.showConfirm = function(objectPopup, callback){
if (objectPopup === undefined){ objectPopup = { title: 'test confirm Popup', template: 'Message test Confirm POPUP' }; }
var alertPopup = $ionicPopup.confirm(objectPopup);
alertPopup.then(function(res) {
if (res) { callback(true); }
else { callback(false); }
});
};
return self;
})
Solution 7 - Javascript
I know this question is old, but this is what worked for me
app.factory('myFactory',function(){
let toRet = {
foo: foo
}
return toRet;
function foo(){ // This function needs to use passed scope.
let $scope = toRet.$scope;
// Do stuff with $scope.
}
});
app.controller('myController',function($scope,myFactory){
myFactory.$scope = $scope;
/*
We could just pass $scope as a parameter to foo, but this is
for cases where for whatever reason, you cannot do this.
*/
myFactory.foo();
});