AngularJS ui modal not working properly - angularjs

Question

I'm building application on AngularJS and I'm using ui-modal, but instead of creating separete views for edit and create (which are identical) i want two instances of modal operating on the same view. This is what I did
I have one main controller which has functions for create and edit, both of them opens their own instance of modal :
(function()
{
'use strict';
angular.module( 'app.projects' )
.controller('ProjectsController', ProjectsController );
ProjectsController.$inject = ['$scope', '$modal'];
function ProjectsController( $scope, $modal )
{
$scope.edit = function( projectId )
{
var modalInstance = $modal.open(
{
templateUrl: 'modules/projects/view/modal/project.html',
controller: 'EditProjectModalInstController',
size: 'lg',
resolve: {
projectId: function(){
return projectId;
}
}
});
};
$scope.create = function()
{
var modalInstance = $modal.open(
{
templateUrl: 'modules/projects/view/modal/project.html',
controller: 'CreateProjectModalInstController',
size: 'lg',
});
};
};
})();
Here are those modal instances controllers:
EditProjectModalInstanceController
(function()
{
'use strict';
angular.module( 'app.projects' )
.controller( 'EditProjectModalInstController', EditProjectModalInstController );
EditProjectModalInstController.$inject = ['ProjectsService', '$scope', '$modalInstance', 'projectId'];
function EditProjectModalInstController(projectsService, $scope, $modalInstance, projectId)
{
$scope.project = function(){return projectsService.project;};
$scope.statuses = [
{name: 'Active', value: 0},
{name: 'Finished', value: 1}
];
$scope.cancel = function () {};
$scope.save = function(){};
};
})();
and here is CreateProjectModalInstanceController.js
(function()
{
'use strict';
angular.module( 'app.projects' )
.controller( 'CreateProjectModalInstController', CreateProjectModalInstController );
CreateProjectModalInstController.$inject = ['ProjectsService', '$scope', '$modalInstance'];
function CreateProjectModalInstController( projectsService, $scope, $modalInstance )
{
$scope.project = function(){return {};};
$scope.statuses = [
{name: 'Active', value: 0},
{name: 'Finished', value: 1}
];
$scope.cancel = function(){};
$scope.save = function(){};
};
})();
So each instance controller has same function, is just that they should do different things depends on action(edit or create).
And here is the actual template:
project.html
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputName" class="control-label col-xs-2">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="inputName" placeholder="Name" ng-model="project().name">
</div>
</div>
<div class="form-group">
<label for="inputName" class="control-label col-xs-2">Status</label>
<div class="col-xs-10">
<select class="form-control" ng-model="project().status">
<option ng-repeat="status in statuses" value="{{status.value}}">{{status.name}}</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button ng-click="save()"> Save </button>
<button ng-click="cancel()">Cancel</button>
</div>
And finally the issue, my problem here is that edit functionality is working fine, but when the create modal is opened, i can not edit field. I'm felling that I'm doing something wrong here, in sense of design principals and I would really appreciate if someone with more experience could point out correct way of doing this type of thing.

Answer 1

The issue you are having with not being able to edit a create form is because your $scope.project function is returning a new object every time it is called. This means almost any action you take will overwrite anything saved in that object. To remedy this just assign the empty object to $scope.project instead of using a function:
$scope.project = {};
And then reference in the template like so:
<input type="text" class="form-control" id="inputName" placeholder="Name" ng-model="project.name">
The only reason it works for editing is because the function returns the same object from the projectsService instead of creating a new one each time.
Once you have that working you can begin refactoring by DRYing up your controllers. There are several ways to approach this but I would just have different resolve options for create and edit; create would have a null project ID and edit would have the editing project ID.
Create:
$scope.create = function() {
var modalInstance = $modal.open({
templateUrl: 'modules/projects/view/modal/project.html',
controller: 'ProjectFormModalInstController',
size: 'lg',
resolve: {
projectId: null
}
});
};
Edit:
$scope.edit = function() {
var modalInstance = $modal.open({
templateUrl: 'modules/projects/view/modal/project.html',
controller: 'ProjectFormModalInstController',
size: 'lg',
resolve: {
projectId: projectId
}
});
};
This way you can use the same controller (I named it ProjectFormModalInstController but you can choose your own generic name) and the controller or the service can initialize a new project if the ID does not exist or return the project if an id is present.
function ProjectFormModalInstController( projectsService, $scope, $modalInstance, projectId ) {
if ( projectId === null ) {
$scope.project = {};
} else {
$scope.project = projectsService.project;
}
// ...some controller code
$scope.save = function(){
if ( project.id === null ) {
// create project
} else {
// update project
}
};
};