AngularJS Factory Event Binding - angularjs

Question

I have an AngularJS directive that uses a factory. What I'm trying to achieve is ensuring that when the 'mousedown' event in the directive is triggered, that a function in my factory is then called.
Seems straightforward, however, where I am running into an issue is in the function in the factory. It doesn't have access to any of my variables that were declared in the factory.
Example binding to the mousedown event in my directive -
$element.on('mousedown', factory.onMouseDown);
Example of my factory and the function that is called by my directive -
angular.module('myApp.myFactory', []).factory('myFactory', [, function () {
var myFactory = function () {
this.someVariable = true;
};
myFactory.prototype.onMouseDown = function (e)
{
console.log(this.someVariable); // this.someVariable comes up as 'undefined'
};
return myFactory;
}]);
What do I need to do in order for my function to be able to access variables in my factory?
Thanks!

Answer 1

With the assumption that myFactory is simulating a "class" and the factory variable holds an object instantiated by myFactory there are many approaches to solve it:
(1) Binding an object as context:
$element.on('mousedown', factory.onMouseDown.bind(factory));
(2) Using a closure to preserve the factory reference:
if callback arguments are known:
$element.on('mousedown', function (evt) {
factory.onMouseDown(evt);
});
if callback arguments aren't known:
$element.on('mousedown', function () {
factory.onMouseDown.apply(factory, arguments);
});
(3) Using a constructor function with privileged methods instead of using the prototype property:
angular.module('myApp.myFactory', []).factory('myFactory', function () {
var myFactory = function () {
var self = this;
self.someVariable = true;
self.onMouseDown = function (e) {
console.log(self.someVariable);
};
};
return myFactory;
});

Answer 2

If the function is correctly triggering, what I think you're missing is what is returned by the myFactory factory. The factory and services in angular act like a closure so you can just declare the variable in the factory and have the function return it since it has access to it.
angular.module('myApp.myFactory', []).factory('myFactory', [function () {
var someVariable = "asdkhdsfhkhlskadfhadsflk";
var myFactory = {
mouseDownEvent: function(e){
console.log(someVariable);
}
}
return myFactory;
}]);