AngularJS controller does not work in embedded form.

Showing 1-5 of 5 messages
AngularJS controller does not work in embedded form. Emerald Hieu 12/16/14 1:37 AM
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
Re: AngularJS controller does not work in embedded form. Valentin Vago 12/16/14 2:15 AM
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
Re: AngularJS controller does not work in embedded form. Emerald Hieu 12/16/14 5:07 AM
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
Re: AngularJS controller does not work in embedded form. Valentin Vago 12/16/14 6:48 AM
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
Re: AngularJS controller does not work in embedded form. v.re...@aryosa.com 4/3/15 7:53 AM
Hi Emerald,

I've your same problem with embedded form.

Did you find any solution?

Thanks
Vittorio