Skip to content
This repository was archived by the owner on Sep 23, 2025. It is now read-only.
This repository was archived by the owner on Sep 23, 2025. It is now read-only.

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

@cirovladimir

Description

@cirovladimir

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions