I have set up a dynamic templateUrl for form fields and I am attempting to use ng-model within ng-repeat. The parent directives and form field directive are functioning correctly and being generated, but when I try to apply ng-model it does not seem to work - the pre-output never changes. Is there a specific method to implement ng-model in this scenario? It works if I hard-code the form inputs instead. I have been following the example in the AngularJS docs.
Markup surrounding the form fields:
<form role="form" ng-controller="FormController as formCtrl" novalidate>
<div ng-repeat="field in panel.form_fields">
<form-field field="field"></form-field>
</div>
<fieldset class="form-group clearfix">
<button type="submit" class="btn btn-primary pull-right">Save Progress</button>
</fieldset>
<pre>form = {{models | json}}</pre>
<pre>master = {{master | json}}</pre>
</form>
Form field directive:
angular.module('formField.directives', [])
.directive('formField', [ '$http', '$compile', function( $http, $compile ) {
var getTemplateUrl = function( field ) {
var type = field.field_type;
var templateUrl = '';
switch( type ) {
case 'textfield':
templateUrl = 'components/form-field/fields/textfield.html';
break;
case 'email':
templateUrl = 'components/form-field/fields/email.html';
break;
// additional cases...
}
return templateUrl;
}
var linker = function( scope, element ) {
var templateUrl = getTemplateUrl( scope.field );
$http.get( templateUrl ).success(function( data ) {
element.html(data);
$compile(element.contents())(scope);
});
}
return {
restrict: 'E',
replace: true,
scope: {
field: '='
},
link: linker
}
}]);
Template used for form field:
<fieldset class="form-group">
<label for="{{field.field_name}}">{{field.field_label}}</label>
<input type="text"
class="form-control"
id="{{field.field_id}}"
name="{{field.field_name}}"
value="{{field.field_value}}"
placeholder="{{field.field_prompt}}"
ng-required="field.field_required"
ng-disabled="field.field_disabled"
ng-model="models[field.field_name]">
</fieldset>
Controller from the AngularJS docs example:
.controller('FormController', ['$scope', function( $scope ) {
$scope.master = {};
$scope.models = {};
$scope.update = function( models ) {
console.info('Update');
$scope.master = angular.copy( models );
};
// additional controller functions...
$scope.reset();
}]);