Ng-click in template widget

Apps & Services HABPanel
1

Since upgrade to OpenHAB 2.1 the ng-click event in my widget’s template doesn’t work any longer:

<div class="box-content switch"
     ng-style="{ 'background-color': itemValue('gContactOpen') == 0 ? 'transparent' : '#C00' }"
     ng-click="window.location.href = '#/view/Fenster';">
  <div class="switch-content">
    <widget-icon iconset="'eclipse-smarthome-classic'" icon="'contact'"
                 inline="true" size="64"
                 state="itemValue('gContactOpen') == 0 ? 'CLOSED' : 'OPEN'"></widget-icon>
    <span style="font-size: 16pt;">
      <ng-pluralize count="itemValue('gContactOpen')"
                    when="{
                      '0': 'Alles geschlossen',
                      'one': 'Ein Fenster oder eine Tür offen',
                      'other': '{} Fenster oder Türen offen'
                    }"></ng-pluralize>
    </span>
  </div>
</div>

Clicking the <div> doesn’t switch to the other panel. I also see an error in the console of the browser: Content Security Policy.

What can I do to work around this problem?

Thanks in advance, Daniel

2

The Conent Security Policy has been put in place to mitigate an arbitrary code execution vulnerability. Without it, your templates could potentially be modified maliciously with the API and do nasty things without you knowing it. Now Javascript code will be blocked unless it comes from a file on the same server as HABPanel - you can however still use Angular expressions.
In your case, you could replace <div ng-click="window.location.href = ..."></div> by <a href="#/view/Fenster"></a>.

Nice example of using ng-pluralize btw! :slight_smile:

3

Thanks for your reply. Is it possible to include an own JavaScript file in HABPanel? Where should it be located (maybe in html/js in OpenHAB’s configuration folder)?

4

Yes, with oc-lazy-load - use the forum’s search feature with this term for examples.

Edit: there is now a mention here with links to other posts:

5

Thank you for this hint.

For interested people, I’ve rewritten the code as follows:

JavaScript in html/js/switch-dashboard.js:

(function () {
    "use strict";

    angular
        .module("switchDashboard", [])
        .directive("switchDashboard", switchDashboard);

    switchDashboard.$inject = ["$location"];
    function switchDashboard ($location) {
        var directive = {
            restrict: "A",
            link: link
        };

        return directive;

        function link(scope, elem, attrs) {
            elem.bind("click", function () {
                $location.url("/view/" + attrs.dashboard);
            });
        }
    };
})();

In my template I use the following code:

<div class="box-content switch" oc-lazy-load="['/static/js/switch-dashboard.js']"
     ng-style="{ 'background-color': itemValue('gContactOpen') == 0 ? 'transparent' : '#C00' }">
  <div class="switch-content" switch-dashboard dashboard="Fenster">
    <widget-icon iconset="'eclipse-smarthome-classic'" icon="'contact'"
                 inline="true" size="64"
                 state="itemValue('gContactOpen') == 0 ? 'CLOSED' : 'OPEN'"></widget-icon>
    <span style="font-size: 16pt;">
      <ng-pluralize count="itemValue('gContactOpen')"
                    when="{
                          '0': 'Alles geschlossen',
                          'one': 'Ein Fenster oder eine Tür offen',
                          'other': '{} Fenster oder Türen offen'
                          }"></ng-pluralize>
    </span>
  </div>
</div>

Maybe one could write it more simple.

1 Like