Как вызвать функцию после отрисовки ng-repeat?

Question

[Sapphiron532]

Здравствуйте.
Пишу одностраничное приложение, где по клику по ссылке с помощью ajax получаю данные с сервера. Полученные данные выводятся с помощью ng-repeat. Проблема в том, что я использую скрипты для подсветки кода в html и для того, чтобы эта подсветка появилась, необходимо вызвать функцию, которая и обновляет эти стили.

Например, у меня есть<pre class="java">code</pre> После полной загрузки страницы вызывается $("pre.java").snippet("java"), но если попробовать вызвать ее после получения ответа по ajax, то она вызывается именно после получения, а не отрисовки на странице.
Моя директива:

app.directive("file", function() {
    return {
	restrict : "E",
	scope : true,
	controller : function($scope, $element) {
	    $scope.fileName = $scope.file.fileName;
	    $scope.fileContent = $scope.file.content;
	},

	link : function(scope, el, attr) {
	    scope.fileName = scope.fileName;
	    scope.fileContent = scope.fileContent;
	},
	template : 
	"<h3 class='title'>name: {{fileName}}</h3><pre class=\"java\">content: {{fileContent}}</pre>"
    }
});

Пробовал вызывать по условию $last. Функция отрабатывает, добавляет свои классы в блоку<pre>, но после этого не происходит замена "fileContent". Возможно кто-то сталкивался с подобной задачей?

Comments

[Максим Дунаевский]

Говорят, в таких случаях надо снижать приоритет директивы, чтобы другие, например, ng-repeat, отрабатывали раньше, но, к сожалению, подробностей я не знаю.

[_ _]

Максим Дунаевский: это не поможет, тут проблема в другом

[Максим Дунаевский]

Александр Марченко: разместите код на pastebin, а лучше в Plunker / JSFiddle / да-мало-ли-где-ещё, чтобы можно было посмотреть, что вы там такое делаете.

Answer 1

[Сергей Протько]

Все просто, делаем подсветку синтаксиса директивой и проблем нет, angular сам все разрулит.

Comments

[Sapphiron532]

Пробовал сделать подобным образом, но не получилось. Как эти директивы должны быть связаны между собой? После джавы, где все вполне очевидно, джаваскриптовские фреймворки вводят меня в замешательство. Не до конца понимаю как это должно отрабатывать и как взаимодействует.

[Сергей Протько]

Sapphiron532: все очень просто, есть функция link которая эдакий конструктор директивы, она связывает логику работы директивы и DOM. Как только у нас появляется элемент с директивой на странице, ангуляр инициализирует их и у вас вызовется link. Как только это происходит - вешаем нашу эту штуку для подсветки синтаксиса и радуемся. Не надо ничего ослеживать, ангуляр сам следит за ситуацией.

[Сергей Протько]

Sapphiron532: суть ангуляра и этих директив всех - декларативность. То есть вы описываете как должно представление реагировать на конкретное состояние системы. Скажем в случае ng-repeat вы не говорите "пробегись циклом по массиву и отрисуй" а "для каждого элемента списка надо делать так".

Answer 2

[Sapphiron532]

Удалось реализовать следующим способом.

app.directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    myFunction();
                    });
            }
        }
    }
});

<div class="file" ng-repeat="file in files"	on-finish-render="ngRepeatFinished">
	<file/>
</div>

Answer 3

[_ _]

Попробуйте $scope.$applyAsync или $scope.$$postDigest.
Принимают функцию, как аргумент.

Comments

[Сергей Протько]

postDigest это функция приватного API, не стоит ее вообще использовать.

[Sapphiron532]

$scope.$$postDigest сработал, спасибо. Но раз ее лучше не использовать, то попробую сперва еще какие-нибудь способы.