Add angularjs code in template widget

Apps & Services HABPanel
1

Hello friends!
I start playing with HabPanel. It is very interesting. I am little khow html, css and javascript. But i confused with HabPanel. I cant add some script to widget template. I know, HabPanel use angularjs and “oc-lazy-load” directive to inject additional JavaScript files. But i cant get result. I try to write simple example
My code in template widget:

<div oc-lazy-load="['/static/angular.js']" ng-controller="ngclickCtrl">
<h2>AngularJs ng-click Event Function Example</h2>
<input type="button" style="cursor:pointer" value="Click Here" ng-click ="getdetails()" /><br /><br />
<span style="color:Red">Number of Times you Clicked: {{clkcount}}</span>
</div>

and my angular.js file:

app.controller('ngclickCtrl', function ($scope) {
$scope.clkcount = 0;
$scope.getdetails = function () {
$scope.clkcount = $scope.clkcount + 1;
}
})

In widget I see button and string. But JS code not work.
Help me, please. What i do wrong?

2

You can’t lazy load the file and use the controller on the same element, you have to do:

<div oc-lazy-load="['/static/angular.js']">
  <div ng-controller="ngclickCtrl">
    ...
3

Yannick Schaus, tnx a lot!
I solve it. My new html code

<div oc-lazy-load="['/static/myangular.js']">
   <h2>AngularJs ng-click Event Function Example</h2>
     <div ng-controller="ngclickCtrl">
           <input type="button" style="cursor:pointer" value="Click Here" ng-click ="getdetails()" /><br /><br />
           <span style="color:Red">Number of Times you Clicked: {{clkcount}}</span>
     </div> 
</div>

And my new JS file:

(function() {

  'use strict';
  angular
  .module('app', [])
  .controller('ngclickCtrl', ['$scope', function($scope) {
	  
	$scope.clkcount = 0;
	$scope.getdetails = function (clkcount) {
	$scope.clkcount = $scope.clkcount + 1; 
	 
  }}]); 
})();
3 Likes
4

Where do I have to put the js file exactly. I’m currently running OpenHAB on Raspbian and placed it in /etc/openhab2/html. I also set user and group to openhab and made it executable, still no success.

In lazy-load, do I have to use absolute paths then?

Maybe somebody can help me out with this, any help is appreciated. :confused:

5

Ok, I found the solution by myself now. AngularJS files need to be placed in /etc/openhab2/html/. So far no problem but the path in lazy-load is a bit weird and that is where my problem was. There is always a /static in front, which seems to indicate the html folder. Therefore, if you place the file directly under /etc/openhab2/html/ the lazy-load path would be /static/myangular.js. I placed mine in a subfolder called mywidget, therefore the path is /static/mywidget/myangular.js.

Hope this helps someone.

6 Likes