Компилируем AngularJS шаблоны в консоли

В дополнение к этой заметке еще одна о том, как можно проверить работу шаблона/директивы/фильтра в консоли.

Для того, чтобы скомпилировать шаблон нам необходим $compile сервис, который можно получить с помощью инжектора:

[javascript]
$injector = angular.element(document).injector();
$compile = $injector.get(‘$compile’);
[/javascript]

также для компиляции нам нужен конкретный $scope:

[javascript]
$scope = angular.element(document).scope();
[/javascript]

на вот теперь можно компилировать:

[javascript]
var template = ‘{{price|currency}}’;
var element = angular.element(‘<div>’).append(template); //контейнер для шаблона
$scope.price = 999999; //просто для теста
$compile(element)($scope);
[/javascript]

и конечно же не забудем обновить дайджест:

[javascript]
$scope.$apply();
[/javascript]

после чего можно доставать результат:

[javascript]
element.html();
[/javascript]

Теперь все вместе и более в сжатой форме:

[javascript]
(function(template){
var $ = angular.element, $0, $scope, $compile, $element;
if(!$0) $0 = document;
$scope = $($0).scope();
$compile = $(document).injector().get(‘$compile’);
$element = $(‘<div/>’).append(template);
$compile($element)($scope);
$scope.$apply();
return $element.html();
})(‘{{1000000|currency}}’);
[/javascript]

 

Ну и при желании можно даже кнопочку для браузера сделать (просто перетащите кнопку в панель закладок и можете пользоваться везде).