AngularJS searchbox directive or how to avoid code duplication in controller

Question

I'm working on multiple school student management application. The are multiple roles: school manager and super manager. The school manager can only search students in his school while super manager can search for student in all schools.

Because the search is done only by removing the school id in second case, I think that the same searchbox can be used, and the same functions for searching.

This is the template:

<div class="input-group">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default" tabindex="-1">{{ searchBy | translate }}</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li ng-repeat="value in searchByFields"><a ng-click="searchByAttr(value)">{{ value | translate }}</a></li>
        </ul>
    </div>
    <form ng-submit="search(searchValue)">
        <input type="text" 
            ng-model="searchValue"  
            class="form-control" 
            placeholder="Search.." />
    </form>
    <span class="input-group-btn">
        <button class="btn btn-warning" type="button">
            <i class="fa fa-search fa-fw"></i>
        </button>
    </span>
</div>

This is the controller scope functions and variables, that is used in search:

$scope.searchBy = 'cn';
$scope.searchByFields = ['cn', 'ou', 'o'];

$scope.searchByAttr = function (value) { 
    $scope.searchBy = value;
}

var searchFn = function (params) {
    User.search(params).success(function (data) {
        $scope.students = data.results;
        $scope.collapsedTableRows = [];
        _.each($scope.students, function () {
            $scope.collapsedTableRows.push(true);
        });
    }).error(function (reason) {
        $scope.students = [];
        $scope.collapsedTableRows = [];
        var log = Logger.getInstance("AdminController(searchFn)");
        var error = reason[0];
        log.error('name - \"{0}\", location - \"{1}\", error - \"{2}\"',
            [error.name, error.location, error.description]);
    });
}

$scope.search = function (value) {
    if(value) {
        var params = {
            search: [
                {attr: 'orgId', value: $injector.get('ORG_DN').replace('%id%', $scope.schoolId) },
                {attr: $scope.searchBy, value: '*' + value + '*' }
            ]
        };
        searchFn(params);
    }
}

As you can see, my search results are stored in scope variables, which are used in table directive. I have the same code in two controllers, which is annoying. How should I construct directive from what I have for search, so that I can pass scope variables to directive and get data from it for my other directive to work correctly?

Answer 1

Create a angular service: Source Tutorial

Your factory can contain data manipulated in a single place, but it also has common operations. It's passable to a controller while creating the controller.

var app = angular.module('app', []);

app.service('MathService', function() {
    this.add = function(a, b) { return a + b };
    this.subtract = function(a, b) { return a - b };
    this.multiply = function(a, b) { return a * b };
    this.divide = function(a, b) { return a / b };
});

app.service('CalculatorService', function(MathService){
    this.square = function(a) { return MathService.multiply(a,a); };
    this.cube = function(a) { return MathService.multiply(a, MathService.multiply(a,a)); };
});

app.controller('CalculatorController', function($scope, CalculatorService) {
    $scope.doSquare = function() {
        $scope.answer = CalculatorService.square($scope.number);
    }
    $scope.doCube = function() {
        $scope.answer = CalculatorService.cube($scope.number);
    }
});