Passing AngularJS object to JSF-call

Question

I'm using AngularFaces and I want to pass an Angular JS object to an JSF bean method. I'm iterating over a table and want to put specific buttons for every iteration:

<table ng-table="tableParams">
    <tr ng-repeat="user in $data">
        <td data-title="'User id'">{{user.id}}</td>
        <td data-title="'Name'">{{user.name}}</td>
        <td data-title="'Hide User'">
            <p:commandButton value="Hide" id="hideUser" action="#{bean.hideUser({{user.id}})}"">
                <f:param name="myId" value="{{disponent.dispNr}}" />
            </p:commandButton>
        </td>
    </tr>
</table>

The important line is:

<p:commandButton value="Hide" id="hideUser" action="#{bean.hideUser({{user.id}})}">

I tried several ways, e.g.

<p:commandButton value="Hide" id="hideUser" action="#{bean.hideUser(user.id)}">

But nothings works. How can I achieve this?

Answer 1

Passing an AngularJS object to JSF caused me a lot of headache, too. After a while I've found a solution, but I'm still not happy with it. I hope to find a better solution in one of the next versions of AngularFaces.

As for now, you can use the global function afToJson to serialise the AngularJS object and pass it to JSF as a string:

    <button class="carFilterButton" jsf:action="#{selectionBean.showDetails()}"
              ng-click="selectionBean.carAsJSon=afToJson(car);">show me!</button>

(see https://github.com/stephanrauh/AngularFaces/blob/master/AngularFaces_2.0/AngularFaces-2.0-examples/src/main/webapp/carshop/ngtable.xhtml).

On the server side, you can use the JSONUtilites of AngularFaces to deserialize the string back to a regular object:

    private String carAsJSon;

    private Car car;

    public String getCarAsJSon() {
        return carAsJSon;
    }

    public void setCarAsJSon(String carAsJSon) {
        this.carAsJSon = carAsJSon;
        int pos = carAsJSon.indexOf(",\"$$hashKey\"");
        if (pos > 0)
            carAsJSon = carAsJSon.substring(0, pos) + "}";

        Car car = (Car)  JSONUtilities.readObjectFromJSONString(carAsJSon, Car.class);
        return getCarBean().showDetails(car);
    }

(see https://github.com/stephanrauh/AngularFaces/blob/master/AngularFaces_2.0/AngularFaces-2.0-examples/src/main/java/de/beyondjava/jsf/sample/carshop/SelectionBean.java).