从控制器中的不同 JS 文件调用过滤器

Question

我有一个控制器驻留在名为 EmployeeCtrl.js 的单独文件中。在这个控制器中，我有一个名为 convertJsonDate 的过滤器，用于将 JsonResult date format 转换为正常格式 MM/dd/yyyy hh:mm:ss.

我现在的问题是，以后如何让这个过滤器在不同的控制器中重复使用？我了解到您可以在单独的 js 文件中添加您的过滤器 filters.js 并将其注入您的控制器，但我不知道如何实现它。

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');
        });
    };  
}]);

})();

使用 convertJsonDate 过滤器

<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>

粘贴站

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

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

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

Answer 1

如果您使用相同的应用程序，它们可以重复使用 ...在这里，

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

对于此应用下的任何其他控制器，您可以像在当前控制器中使用它一样使用此过滤器

Answer 2

它们是在同一个文件中还是在不同的文件中都没有关系。只要两者在同一个模块中，或者过滤器在您包含在依赖项中的模块中，您就可以使用它。

我建议在这里有 3 个文件：一个声明您的模块，一个用于您的控制器，一个用于您的过滤器：

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');
        });
    };  
}]);

})();

从控制器中的不同 JS 文件调用过滤器

Calling filter from different JS file in Controller

angularjs

angular-filters