AngularJS controller does not work in embedded form.

1,082 views
Skip to first unread message

Emerald Hieu

unread,
Dec 16, 2014, 4:37:16 AM12/16/14
to camunda-...@googlegroups.com
Hi,

I'm trying to use AngularJS in embedded form. I tried to put this code in the embedded form but it shows:


Form failure: [ng:areq] Argument 'FirstCtrl' is not a function, got undefined http://errors.angularjs.org/1.2.16/ng/areq?p0=FirstCtrl&p1=not%20a%20function%2C%20got%20undefined


I didn't include AngularJS libs because the console reports duplicate inclusion.

1) How to run custom AngularJS script?
2) How to get contextPath for including the libraries? i.e "localhost:8080/my-app".

Best Regards,
Emerald Hieu

Valentin Vago

unread,
Dec 16, 2014, 5:15:29 AM12/16/14
to camunda-...@googlegroups.com
Hello Emerald,

Are you trying loading that form in the context of the Tasklist or something homebrew (your `my-app`)?
In the mean time, maybe you would be interested by this example: https://github.com/camunda/camunda-bpm-examples/tree/master/sdk-js/browser-forms-angular 
and / or the way to deal with AngularJS when embedded in the form itself: https://github.com/camunda/camunda-bpm-sdk-js/blob/master/doc/embedded-forms/support-angularjs.md

About your second question, from my understanding, it depends on several factors. In the Tasklist, we pass those references by writing (on the fly) them on the `<base>` tag (in `<head>`) and compiling them.

I hope it will help, keep us in touch and all the best,
Valentin

Emerald Hieu

unread,
Dec 16, 2014, 8:07:11 AM12/16/14
to camunda-...@googlegroups.com
Hi Valentin,

I ran the example you've posted above. It works well. But the example runs independently whereas the problem I have stays in the context of tasklist.
This is my embedded form which binds to a User Task (just like the Camunda Invoice sample).

test.html

<form role="form" class="form-horizontal" >

<script type="text/javascript" src="http://localhost:8080/my-app/resources/js/test.js" ></script>

<div ng-app="myApp">
   <div ng-controller="FirstCtrl">  
       
        <h1> {{data.message + " world"}}</h1>
       
       <div class="{{data.message}}">
           Wrap me in a foundation component
       </div>
   </div>
</div>
       <br/>
</form>


test.js

angular
.module('myApp', [])
.controller('FirstCtrl', function($scope) {
    $scope.data = {message: "Hello"};
});


About the second question, excuse me. Does Camunda not provide a way to get the applications' context path? For external JSF form, I can get it using #{request.contextPath}. What do you mean "writing on the fly"?

Kind Regards,
Emerald Hieu

Valentin Vago

unread,
Dec 16, 2014, 9:48:17 AM12/16/14
to camunda-...@googlegroups.com
Hi,

by "on-the-fly", I mean that the server makes some string replacement when serving the file (this is more or less where my understanding from the whole Java thingy ends).
In our templates (here the Tasklist original index.html) it looks like:
  <base href="$BASE"
        admin-api="$APP_ROOT/api/admin/"
        engine-api="$APP_ROOT/api/engine/"
        app-root="$APP_ROOT"
        app-name="tasklist" />

maybe you can try a similar approach.

All the best,
Valentin

v.reg...@aryosa.com

unread,
Apr 3, 2015, 10:53:43 AM4/3/15
to camunda-...@googlegroups.com
Hi Emerald,

I've your same problem with embedded form.

Did you find any solution?

Thanks
Vittorio
Reply all
Reply to author
Forward
0 new messages