# Ng-click in template widget

**URL:** <https://community.openhab.org/t/ng-click-in-template-widget/31822>\
**Category:** HABPanel\
**Tags:** habpanel\
**Created:** [July 18, 2017, 9:06am UTC](https://community.openhab.org/t/ng-click-in-template-widget/31822 "2017-07-18T09:06:57Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![danny75](https://community.openhab.org/user_avatar/community.openhab.org/danny75/32/4644_2.png) [@danny75](https://community.openhab.org/u/danny75)\
**Post date:** [July 18, 2017, 9:06am UTC](https://community.openhab.org/t/ng-click-in-template-widget/31822/1 "2017-07-18T09:06:57Z")

</div>

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

```auto
<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

---

<div class="post-metadata">

**Author:** ![ysc](https://community.openhab.org/letter_avatar_proxy/v4/letter/y/e480ec/32.png) [@ysc](https://community.openhab.org/u/ysc)\
**Post date:** [July 18, 2017, 9:28am UTC](https://community.openhab.org/t/ng-click-in-template-widget/31822/2 "2017-07-18T09:28:18Z")

</div>

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! 🙂

---

<div class="post-metadata">

**Author:** ![danny75](https://community.openhab.org/user_avatar/community.openhab.org/danny75/32/4644_2.png) [@danny75](https://community.openhab.org/u/danny75)\
**Post date:** [July 18, 2017, 9:35am UTC](https://community.openhab.org/t/ng-click-in-template-widget/31822/3 "2017-07-18T09:35:11Z")

</div>

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)?

---

<div class="post-metadata">

**Author:** ![ysc](https://community.openhab.org/letter_avatar_proxy/v4/letter/y/e480ec/32.png) [@ysc](https://community.openhab.org/u/ysc)\
**Post date:** [July 18, 2017, 9:40am UTC](https://community.openhab.org/t/ng-click-in-template-widget/31822/4 "2017-07-18T09:40:22Z")

</div>

Yes, with `oc-lazy-load` - [use the forum’s search feature with this term](https://community.openhab.org/search?q=oc-lazy-load) for examples.

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

> [@HABPanel Development & Advanced Features: Start Here!](https://community.openhab.org/t/habpanel-development-advanced-features-start-here/30755):
>
> This Wiki post aims to be a centralized resource to help new users (and experienced users alike!) with the advanced features in HABPanel. It will contain relevant examples and links to help you with common issues and getting the most out of these features! Users with the “Member” badge (and levels above) can edit this post, don’t hesitate to do so if you deem it appropriate thumbsupTemplates & Custom Widgets What are templates? If the standard widgets don’t fit your needs or your taste, HAB…

---

<div class="post-metadata">

**Author:** ![danny75](https://community.openhab.org/user_avatar/community.openhab.org/danny75/32/4644_2.png) [@danny75](https://community.openhab.org/u/danny75)\
**Post date:** [July 18, 2017, 10:10am UTC](https://community.openhab.org/t/ng-click-in-template-widget/31822/5 "2017-07-18T10:10:03Z")

</div>

Thank you for this hint.

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

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

```javascript
(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:

```auto
<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.