klaydze klaydze - 2 months ago 9
AngularJS Question

Calling filter from different JS file in Controller

I have a controller that was residing in a separate file named as

EmployeeCtrl.js
. Inside this controller I have a filter called
convertJsonDate
to convert
JsonResult date format
to normal format
MM/dd/yyyy hh:mm:ss
.

My question now is, how do I make this filter reusable in different controller in the future? I have read that you can add your filter in a separate js file
filters.js
and inject it to your controller, but I don't know to implement this.

TIA

app.js

(function () {
'use strict';

angular.module('app', []);
})();


EmployeeCtrl.js

(function () {
'use strict';

var app = angular.module('app');

app.filter('convertJsonDate', ['$filter', function ($filter) {
return function (input, format) {
return (input) ? $filter('date')(parseInt(input.substr(6)), format) : '';
};
}]);

app.controller('app.EmployeeController', ['$scope', 'app.EmployeeService', function ($scope, EmployeeService) {

GetAllEmployee();

$scope.sortColumnBy = function (keyname) {
$scope.sortKey = keyname;
$scope.reverse = !$scope.reverse;
}

$scope.employee = {
employeeId: '',
firstName: '',
lastName: '',
password: '',
daysPerWeek: 0,
active: true,
departmentId: 0,
accountTypeId: 0
};

$scope.clear = function () {
$scope.employee.employeeId = '';
$scope.employee.firstName = '';
$scope.employee.lastName = '';
$scope.employee.password = '';
$scope.employee.daysPerWeek = 0;
$scope.employee.active = false;
$scope.employee.departmentId = 0;
$scope.employee.accountTypeId = 0;
};

function GetAllEmployee() {
var getEmployeeData = EmployeeService.getEmployees();

getEmployeeData.then(function (employee) {
$scope.employees = employee.data;
}, function () {
alert('Error in getting employee records');
});
};
}]);

})();


Using convertJsonDate filter

<div ng-app="app">
<div ng-controller="app.EmployeeController">
.....
<tbody>
<tr ng-repeat="e in employees | orderBy:sortKey:reverse | filter:searchKeyWord">
<td>{{e.AccountDateExpired | convertJsonDate:'MM/dd/yyyy hh:mm:ss'}}</td>
</tr>
</tbody>
....
</div>
</div>


Pastebin

Index.chtml
http://pastebin.com/aXDSmYAV

EmployeeCtrl.js
http://pastebin.com/eQhRREPy

app.js
http://pastebin.com/1GB4uhvx

Answer

It doesn't matter if they're in the same file or in different files. As long as both are in the same module, or the filter is in a module that you include in your dependencies, you will be able to use it.

I would suggest having 3 files here: one that declares your module, one for your controller(s), and one for your filter(s):

module.js

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

filters.js

var app = angular.module('app');

app.filter('convertJsonDate', ['$filter', function ($filter) {
    return function (input, format) {
        return (input) ? $filter('date')(parseInt(input.substr(6)), format) : '';
    };
}]);

controllers.js

var app = angular.module('app');

app.controller('app.EmployeeController', ['$scope', 'app.EmployeeService', function ($scope, EmployeeService) {

    GetAllEmployee();

    $scope.sortColumnBy = function (keyname) {
        $scope.sortKey = keyname;
        $scope.reverse = !$scope.reverse;
    }

    $scope.employee = {
        employeeId: '',
        firstName: '',
        lastName: '',
        password: '',
        daysPerWeek: 0,
        active: true,
        departmentId: 0,
        accountTypeId: 0
    };

    $scope.clear = function () {
        $scope.employee.employeeId = '';
        $scope.employee.firstName = '';
        $scope.employee.lastName = '';
        $scope.employee.password = '';
        $scope.employee.daysPerWeek = 0;
        $scope.employee.active = false;
        $scope.employee.departmentId = 0;
        $scope.employee.accountTypeId = 0;
    };

    function GetAllEmployee() {
        var getEmployeeData = EmployeeService.getEmployees();

        getEmployeeData.then(function (employee) {
            $scope.employees = employee.data;
        }, function () {
            alert('Error in getting employee records');
        });
    };  
}]);

})();
Comments