Angular Form HTML from API with ng-model not binding

Question

So I'm generating form HTML on the server and serving it up via an API for angular to use. The reason for this is that the forms need to be generated by server-side plugins. This may not be the best way do to it for Angular, but I'm asking whether it will be possible...

template.html

<form>
    <div ng-bind-html="form"></div>
    <button ng-click="save"></button>
</form>

directive.js (abridged)

ExtensionManagementService.getConfiguration({
    extension_id: $scope.extension.id,
    configuration_id: configuration.id || null
}).$promise.then(function(data) {
    $scope.form = $sce.trustAsHtml(data['form']);
    $scope.configuration = data.data;
})

The code above binds successfully into the div and I can see the form as I expect.

Example markup:

<p>
    <label for="id_name">Name:</label> 
    <input id="id_name" name="name" ng-model="configuration.name" type="text" />
</p>

I have a save event that passes the scope.configuration into a controller which I then console out the values.

However configuration.name is always blank, I expect because angular hasn't registered the binding of the inserted markup.

Is there a way to essentially give Angular a nudge?

May this will be helpful http://stackoverflow.com/questions/22572696/bind-new-html-to-controller-after-calling-trustashtml-angularjs — originof, Oct 07 '14 at 12:58

score 0 · Accepted Answer · answered Nov 26 '14 at 08:53

As @originof suggested, and a colleague almost beat him to it, the $compile module is the key to this:

ExtensionManagementService.getConfiguration({
    extension_id: $scope.extension.id,
    configuration_id: configuration.id || null
}).$promise.then(function(data) {
    var form_element = $element.find('div[role="form"]');
    form_element.html(data['form']);
    $scope.configuration = data.data;
    $compile(form_element.contents())($scope);
});

Angular Form HTML from API with ng-model not binding

1 Answers1