Globally accessible filter for angular application

Question

In an AngularJS application, I have a view with a list of tasks and a sidebar with a list of filtering options to filter these tasks. Both are in separate controllers.

Side panel

<div ng-controller="SidebarController"> <a href="" ng-click="showOnlyCompleted()">Completed</a> </div> 

Tasks

 <div ng-controller="TaskController"> <tr ng-repeat="task in tasks | filter: search"> <td>task.title</td> <td>task.status</td> </tr> </div> 

Sidebarcontroller

 $scope.search = []; $scope.showOnlyCompleted = function() { // set search filter $scope.search.status = 'completed'; }; 

Taskcontoller

 $scope.tasks = [ { title: 'do something', status:'todo' }, { title: 'do something else', status:'completed' } ]; 

The question is, how can I make the search filter be controlled using the SidebarController, but can it still be used to filter tasks coming from the TaskController? Is this a review issue because both controllers must have access to it?

I think that the solution can be something injectable, for example, a service, but I really don’t know how to make this work for this case by data binding?

Answer 1

I saw one nice solution for this here . Basically just create a filterService with some state, add it to your controllers and bind to it directly in the view.