Camunda Embedded forms with Angularjs: Module Partially Bootstrap and Controllers not invoked

I’m trying to create a module and controller and bind it to the body of the html doc used for the embedded form and I’ve ran into several issues with this. The module “app” is created but nothing tied to it is not invoked. So, the config block is not executed nor is the controller. Is this kind of setup possible? With this, it would allow me to structure the angularjs properly and increase readability. Any help with this would be awesome. An example of what I’m attempting to do is below.

angular.module('app', []).config(function () {
   console.log("inside app config");
})

When the Camunda form is loaded, the above module config function is not fired. Example of index.html

<html>
    <script src="/my-warfile-process-0.0.1-SNAPSHOT/forms/app.module.js"></script>
    <script src="/my-warfile-process-0.0.1-SNAPSHOT/forms/main.controller.js"></script>
<body ng-app="app">
    <form role="form" name="MyCamProcess">

    </form>
</body>

When the form is loaded, the app module seems to be only partially bootstrapped if that makes since. angular.module(‘app’) does exist when you run that command in the Chrome console, still the app config is not fired.

The other issues I am having is that, 1) I can only define controllers as a separate function ex.

(function () {
   angular.module('app').controller("myController", MyController);

   var MyController = function ($scope) {
       /**
        * do controller stuff
        */
   };
})();

. 2) I can’t inject services or factories in to the controller ex blow

(function () {
    angular.module('app').controller("myController", MyController);
    angular.module('app').factory("myFactory", MyFactory);

    var MyController = function ($scope, MyFactory) {
        /**
         * do controller stuff
         */
    };

    var MyFactory = function () {
        /**
         * do factory stuff
         */
    };
})();

The above give me the error throws the dependency error on the injection into the controller.

Another is that the camForm object, it seems that the only way to access to is to embed a script tag in the form tag and either manually inject the object of throw it on the windows object ex.

<form ng-app="app" role="form" name="MyCamProcess">
    <script cam-script type="text/form-script">
        //add to window object
        window.camForm = camForm;

        //inject manually
        inject(function () {
            MyController(camForm);
        })
    </script>
</form>

Not sure the inject method works, but it does lol. Any help with this would be most helpful :slight_smile:

UPDATE:

So, I noticed that the controller and services/factories are being added to the invokedQueue, but not actually being invoked:

Is this not a feasible question to ask? It would be great if I could get an answer on this asap.

Are you rendering this in Tasklist?
If so, you cannot have an ng-app within an ng-app, being Tasklist itself.
You have to place your customizations in app/tasklist/scripts/config.js

Hi @freemanj,

Below docs show the steps to add angularjs controllers, directives…

Notice: As @eugene said, you shouldn’t use ng-app in your embedded form.
Also your controllers, services… should be defined in a user defined angular module as you can see in below docs

https://docs.camunda.org/manual/7.9/webapps/tasklist/configuration/#custom-scripts

1 Like