Looking to enhance the SEO caching capabilities of my AngularJS website, I've embarked on implementing a couple of directives for custom page titles and descriptions.
Incorporated within my app config (
angular.module('website', [...'website.directives'...])angular.module('website.directives', [])angular.module('website.directives').directive('viewTitle', function() {
restrict = 'E';
link($scope, element) {
console.log("Linking view title.");
var text = element.text();
element.remove();
$('html head title').text(text);
}
});
angular.module('website.directives').directive('viewDesc', function() {
restrict = 'E';
link($scope, element) {
console.log("Linking view description.");
var text = element.text();
element.remove();
$('html head meta[name=description]').attr('content', text);
}
});
In template usage, the directives are applied as expected:
<view-title>My Website</view-title>
<view-desc>A short description of my website.</view-desc>
Unfortunately, the directives do not seem to be functioning correctly as intended. Neither does the expected text removal occur nor do the title/description updates take place. Surprisingly, the console statements in the link functions remain uncalled. The reason behind why the directives fail to execute is uncertain to me.
I am willing to provide any additional details required to troubleshoot the issue further. Thank you!
EDIT: Regrettably, an attempt was made to translate the TypeScript directive into JavaScript in order to simplify readability, but considering its negative aftermath, it was, in fact, counterintuitive. It would have been more sensible to solely furnish the code without alterations. Here's how the directive code actually looks like:
export class ViewTitleDirective implements ng.IDirective {
restrict = 'E';
link($scope, element: JQuery) {
console.log("Linking view title.");
var text = element.text();
element.remove();
$('html head title').text(text);
}
}
export class ViewDescriptionDirective implements ng.IDirective {
restrict = 'E';
link($scope, element: JQuery) {
console.log("Linking view description.");
var text = element.text();
element.remove();
$('html head meta[name=description]').attr('content', text);
}
}
angular.module('website.directives').directive('viewTitle', () => ViewTitleDirective);
angular.module('website.directives').directive('viewDesc', () => ViewDescriptionDirective);