How to make ng-include get HTML and use form values that come with it

254 views
Skip to first unread message

João Peixoto

unread,
Apr 18, 2013, 2:51:23 PM4/18/13
to ang...@googlegroups.com
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:
  1. The object will be in the DOM as a string.. not too bad but not as clean as I would like
  2. 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!

João Peixoto

unread,
Apr 19, 2013, 12:56:56 AM4/19/13
to ang...@googlegroups.com
Answering my own question, I did things a bit differently and I believe in a more AngularJS way.

Instead of getting the html with the data from the server and configured that HTML to be a template. Since I'm using JSP and I didn't want to make another endpoint (and request) just to get the template, I added it on the root page, so it is loaded only once up front. 

The action now makes a request and initializes the template (which contains a controller).

JP
Reply all
Reply to author
Forward
0 new messages