Calling a JavaScript function on an AngularJS Service

Question

I'm working on a custom panel for Kibana. Kibana uses AngularJS. There is a service called "filter". The code for that service can be seen here. I'm trying to dynamically add a filter at runtime from my panel. From what I can tell, I thought I could do something like this:

var n = getName();
var filter = {
  alias: 'My Filter',
  editing: false,
  query: 'name:"' + n + '"',
  type: 'querystring'
};
$scope.dashboard.current.services.filter.set(filter, null, true);

Unfortunately, this approach does not seem to work. Instead, I get an error that says:

TypeError: undefined is not a function 

After some investigation, I've pinpointed the problem to the fact that set does not appear to be a function on the filter object. I did not see it listed when I ran console.log($scope.dashboard.current.services.filter);

I'm confused. When I look at the code in the service itself, I can clearly see a set method. Yet, its not listed in the console.log. Am I misunderstanding something here? Is there a way to call the set function on the filter service? If so, how?

Thank you!

Answer 1

It looks as though you might be using services incorrectly, as they are injected objects not usually available on $scope. In order to use the filter service, you would do something like the following:

// inject the filter service into your controller
myModule.controller('MyCtrl', ['filterSrv', function(filterSrv){
    // create your filter object and add it
    var n = getName();
    var filter = {
        alias: 'My Filter',
        editing: false,
        query: 'name:"' + n + '"',
        type: 'querystring'
    };
    filterSrv.set(filter, null, true);        
}]);