2014-11-14 75 views
2

嗨我需要指針來了解如何創建封裝角度js過濾器的實用程序模塊,以便我可以將輸入值(2014-11-14T22:51:04.635Z)傳遞給格式化並獲得格式化(ng-filter:2014年11月14日 - 02:51 PM)輸出。目標是利用角度Js過濾器屬性獨立於前端框架。像鬍鬚這樣的框架在HTML中有{{}}標籤,這種角度也有,這可能會導致在html文件中直接使用ng-filters時出現問題。所以我試圖使用ngFilters而不在html中包含它們。所以我們的目標是接受來自模板的值,使用ngFilters將它們格式化爲JS文件並將值推回模板。創建封裝角度js特性的實用程序模塊

+0

我會寫一個JavaScript庫,它執行常見任務並將其用於此目的... – harishr 2014-11-22 07:37:49

回答

1

您可以方便地調用$過濾器在JavaScript:

var input = '2014-11-14T22:51:04.635Z'; 
var format = 'd HHH yyyy - h:mm a'; 
var output = $filter('date')(new Date(input), format); 

如果你想改變一個數組,你可以使用.MAP

// You need to get $filter somewhere 
var format = 'd HHH yyyy - h:mm a'; 
var formatDate = $filter('date'); // Save (input.length - 1) function calls 

input = ['2014-11-14T22:51:04.635Z', ...] 
var output = input.map(function(in) { 
    return formatDate(new Date(in), format); 
}); 

要了解更多關於角的date過濾器: https://docs.angularjs.org/api/ng/filter/date

0

我不確定你在做什麼是非常值得的。我在想,如果改變角度的開始和結束的符號可以完全解決您的問題,這樣你就可以直接使用裏面的HTML過濾器:

AngularJS-Twig conflict with double curly braces

有一些情況下,你需要手動調用特定的過濾器在JavaScript。您使用它之前,你可以做到這一點使用$過濾器需要由角注射:

How to use a filter in a controller?

現在我希望你不需要這個還是最好把不正常的角度應用程序使用此,但在極少數情況下,您可能需要在非角度上下文中訪問角度功能(如$ filter)。在這種情況下,你可以使用下列元素訪問$範圍:

var scope = $("path to the DOM element").scope(); 

現在你可以閱讀和範圍寫入範圍和更好的通話功能。在這種情況下,你需要把你的過濾器的實例的範圍是這樣的:

$scope.filterInstance = $filter; 

現在你可以從任何調用此過濾器實例,其中外連角上下文: VAR範圍= $(」範圍();}。 var result = scope.filterInstance(「xyz」);

1

如果您想在不實際引導AngularJS到您的網絡應用程序的情況下訪問某些AngularJS功能,您可以創建一個獨立的注入器。

var $injector = angular.injector(['ng']); 

然後,您可以從它

$filter = $injector.invoke(['$filter', function ($filter) { return $filter; }]); 

檢索$filter服務,並有任何默認AngularJS的過濾器的訪問

var formattedDate = $filter('date')(originalDate, format);