I am showing a modal popup on click of a button in a row in ng grid.So to get a form in the modal popup i am filling it with JSON Schema as follows
The Html Of Modal Pop Up is
<div class="modal-header">
<h3 class="modal-title">Edit Row</h3>
</div>
<div class="modal-body">
<form sf-schema="schema" sf-form="form" sf-model="entity"></form>
</div>
<div class="modal-footer">
<button class="btn btn-success" ng-click="save()">Save</button>
<button class="btn btn-warning" ng-click="$close()">Cancel</button>
</div>
</div>
The schema is put into the constant like below in an external js file:
var app = angular.module("myApp", ['ngGrid','ui.bootstrap']);
app.constant('UserPopUpSchema', {
type: 'object',
properties: {
FullName: { type: 'string', title: 'FullName' },
UserName: { type: 'string', title: 'UserName' },
Password: { type: 'string', title: 'Password' },
EmailAddress: { type: 'string', title: 'EmailId' },
Phone: {type:'string',title:'phNum'}
}
});
So on click of a row in ng-grid
I am executing a function called edit row ,which would open the pop up and fill the form according to the constant.
$scope.editRow = function (grid,row) {
$modal.open({
templateUrl: 'PopUpTemplate.htm',
controller:['$modalInstance', 'grid', 'row','UserPopUpSchema', function($modalInstance,grid,row){
schema = 'UserPopUpSchema';
entity = angular.copy(row.entity);
form = [
'FullName',
'UserName',
'Password',
'EmailId',
'phNum'
];
}],
resolve: {
grid: function () { return grid; },
row: function () { return row; }
}
});
};
But here I am a bit confused on how to inject a constant to a controller function .As a result the modal appear with a blank form.
Appreciate any help!!
Try this
$modal.open({
templateUrl: 'PopUpTemplate.htm',
controller: function ($modalInstance, grid, row, UserPopUpSchema) {
// Do Stuff
},
resolve: {
grid: function () {
return grid;
},
row: function () {
return row;
},
UserPopUpSchema: function () {
return UserPopUpSchema;
}
}
});