chieffancypants / angular-hotkeys

Configuration-centric keyboard shortcuts for your Angular apps.
http://chieffancypants.github.io/angular-hotkeys/
MIT License
1.68k stars 254 forks source link

Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context when configuring templateHeader #287

Open cirovladimir opened 5 years ago

cirovladimir commented 5 years ago

I tried to change the header for custom locale but got Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context when configuring according to the docs.

Header and footer:

You can specify a custom header and footer for the cheatsheet. Both are HTML, and if the header is set it will override the normal title.

angular.module('myApp', ['cfp.hotkeys'])
.config(function(hotkeysProvider) {
hotkeysProvider.templateHeader = '<div class="my-own-header">...</div>';
hotkeysProvider.templateFooter = '<div class="my-own-footer">...</div>';
})

Although, setting the template works! I ended up copying and pasting the original template and replacing just the 'Keyboard shortcuts' phrase to spanish and also setting the cheatSheetDescription accordingly.

.config(function (hotkeysProvider) {
        hotkeysProvider.cheatSheetDescription = 'Mostrar/Ocultar esta ayuda';
        hotkeysProvider.template = '<div class="cfp-hotkeys-container fade" ng-class="{in: helpVisible}" style="display: none;"><div class="cfp-hotkeys">' +
                      '<h4 class="cfp-hotkeys-title" ng-if="!header">Teclas de acceso rapido</h4>' +
                      '<div ng-bind-html="header" ng-if="header"></div>' +
                      '<table><tbody>' +
                        '<tr ng-repeat="hotkey in hotkeys | filter:{ description: \'!$$undefined$$\' }">' +
                          '<td class="cfp-hotkeys-keys">' +
                            '<span ng-repeat="key in hotkey.format() track by $index" class="cfp-hotkeys-key">{{ key }}</span>' +
                          '</td>' +
                          '<td class="cfp-hotkeys-text">{{ hotkey.description }}</td>' +
                        '</tr>' +
                      '</tbody></table>' +
                      '<div ng-bind-html="footer" ng-if="footer"></div>' +
                      '<div class="cfp-hotkeys-close" ng-click="toggleCheatSheet()">&#215;</div>' +
                    '</div></div>';
    })

angular: 1.4.5 hotkeys: 1.7.0 browser: Chrome Version 68.0.3440.106 (Official Build) (64-bit)