Я пишу функцию, которая может создать шаблон электронной почты из шаблона HTML и некоторую информацию, которая предоставляется. Для этого я использую $compile
функцию Angular.
Есть только одна проблема, которую я не могу решить. Шаблон состоит из базового шаблона с неограниченным количеством ng-include
. Когда я использую "лучшую практику" $timeout
(здесь), он работает, когда я удаляю все ng-include
. Так что это не то, что я хочу.
Пример $timeout:
return this.$http.get(templatePath)
.then((response) => {
let template = response.data;
let scope = this.$rootScope.$new();
angular.extend(scope, processScope);
let generatedTemplate = this.$compile(jQuery(template))(scope);
return this.$timeout(() => {
return generatedTemplate[0].innerHTML;
});
})
.catch((exception) => {
this.logger.error(
TemplateParser.getOnderdeel(process),
"Email template creation",
(<Error>exception).message
);
return null;
});
Когда я начинаю добавлять ng-include
к шаблону, эта функция начинает возвращать шаблоны, которые еще не полностью скомпилированы (вложенные функции размещаются $timeout
). Я считаю, что это из-за асинхронного характера ng-include
.
Рабочий код
Этот код возвращает html-шаблон, когда выполняется рендеринг (функция теперь может быть повторно использована, см. этот вопрос для проблемы). Но это решение не стоит, поскольку он использует angular private $$phase
для проверки наличия текущих $digest
. Поэтому мне интересно, есть ли другое решение?
return this.$http.get(templatePath)
.then((response) => {
let template = response.data;
let scope = this.$rootScope.$new();
angular.extend(scope, processScope);
let generatedTemplate = this.$compile(jQuery(template))(scope);
let waitForRenderAndPrint = () => {
if (scope.$$phase || this.$http.pendingRequests.length) {
return this.$timeout(waitForRenderAndPrint);
} else {
return generatedTemplate[0].innerHTML;
}
};
return waitForRenderAndPrint();
})
.catch((exception) => {
this.logger.error(
TemplateParser.getOnderdeel(process),
"Email template creation",
(<Error>exception).message
);
return null;
});
Что я хочу
Я хотел бы иметь функциональность, которая может обрабатывать неограниченное количество ng-inlude
и возвращаться только при успешном создании шаблона. Я НЕ создаю этот шаблон и должен вернуть полностью скомпилированный шаблон.
Решение
После экспериментирования с ответом @estus я, наконец, нашел другой способ проверки при компиляции $. Это привело к приведенному ниже коду. Причина, по которой я использую $q.defer()
, связана с тем, что шаблон разрешен в событии. Из-за этого я не могу вернуть результат, как нормальное обещание (я не могу сделать return scope.$on()
). Единственная проблема в этом коде состоит в том, что она сильно зависит от ng-include
. Если вы обслуживаете функцию, шаблон, который не имеет ng-include
, $q.defer
, никогда не будет заменен.
/**
* Using the $compile function, this function generates a full HTML page based on the given process and template
* It does this by binding the given process to the template $scope and uses $compile to generate a HTML page
* @param {Process} process - The data that can bind to the template
* @param {string} templatePath - The location of the template that should be used
* @param {boolean} [useCtrlCall=true] - Whether or not the process should be a sub part of a $ctrl object. If the template is used
* for more then only an email template this could be the case (EXAMPLE: $ctrl.<process name>.timestamp)
* @return {IPromise<string>} A full HTML page
*/
public parseHTMLTemplate(process: Process, templatePath: string, useCtrlCall = true): ng.IPromise<string> {
let scope = this.$rootScope.$new(); //Do NOT use angular.extend. This breaks the events
if (useCtrlCall) {
const controller = "$ctrl"; //Create scope object | Most templates are called with $ctrl.<process name>
scope[controller] = {};
scope[controller][process.__className.toLowerCase()] = process;
} else {
scope[process.__className.toLowerCase()] = process;
}
let defer = this.$q.defer(); //use defer since events cannot be returned as promises
this.$http.get(templatePath)
.then((response) => {
let template = response.data;
let includeCounts = {};
let generatedTemplate = this.$compile(jQuery(template))(scope); //Compile the template
scope.$on('$includeContentRequested', (e, currentTemplateUrl) => {
includeCounts[currentTemplateUrl] = includeCounts[currentTemplateUrl] || 0;
includeCounts[currentTemplateUrl]++; //On request add "template is loading" indicator
});
scope.$on('$includeContentLoaded', (e, currentTemplateUrl) => {
includeCounts[currentTemplateUrl]--; //On load remove the "template is loading" indicator
//Wait for the Angular bindings to be resolved
this.$timeout(() => {
let totalCount = Object.keys(includeCounts) //Count the number of templates that are still loading/requested
.map(templateUrl => includeCounts[templateUrl])
.reduce((counts, count) => counts + count);
if (!totalCount) { //If no requests are left the template compiling is done.
defer.resolve(generatedTemplate.html());
}
});
});
})
.catch((exception) => {
defer.reject(exception);
});
return defer.promise;
}