從控制器中的不同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

不管它們是在同一個文件還是在不同的文件中。只要兩者在同一個模塊中，或者過濾器位於您的依賴項中包含的模塊中，就可以使用它。

我建議有3個文件的位置：一個聲明你的模塊，一個是你的控制器（S），一個用於您的過濾器（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'); 
     }); 
    }; 
}]); 

})(); 

Answer 2

他們可以，如果你使用的是相同的應用程序 ......這裏被重用，

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

你可以用同樣的方法此過濾器使用的是它在電流控制器用於任何其他控制器這個程序

下