My scenario is:
I have a table and each row is expandable. the expandable part is an ng-include like: "ng-include='rowUrl'" where rowUrl is empty at first.
When a button is clicked rowUrl is changed to the URL that gets the html containing the details of that row. This is a form basically with all values filled out.
So far this works and the html returned looks good, but angular does not care about the form values (this has been discussed several times and I understand why).
What I want to avoid is to have to make 2 requests to the server, one for the "template" and another for the values.
What I tried to do was create a directive called "useDefault" like:
...
function(scope, element, attrs){
scope[attrs.ngModel] = element.val();
};
...
and the input field has something like:
<input type="text" value="im a default val" data-use-default />
This kinda works but when you get radio buttons and checkboxes into the mix it complicates things.
I'm using JSP to render the html so one thing I also tried was:
<form:form ng-controller="MyCtrl" ng-init="init(${jsonify(formObject)})">...</form:form>
Jsonify is a convenience method that converts a java object into a json object (using
Jackson) and making the init method take it.
Two downsides with this:
- The object will be in the DOM as a string.. not too bad but not as clean as I would like
- If the object has quotes the app is vulnerable, and this is a deal breaker for me
So to wrap up, my objective is to make an angular app get some HTML containing an angular controller, on demand and initialize it with the proper values without having to make a second request for this.
Thanks in advance!