For the example, let's consider a simple form with just one text input. I would like to put it in a partial so that I can include other inputs and have a single form for both creating and updating the artist.
Partial Code
<input name="name" type="text" data-ng-model="artist.name" id="name">
Create Form
<section data-ng-controller="ArtistsController">
<form name="artistForm" class="form-horizontal" data-ng-submit="create()" novalidate>
<ng-include src="'/modules/artists/views/partials/form-artist.client.view.html'"></ng-include>
</form>
</section>
Edit (Update) Form
<section data-ng-controller="ArtistsController" data-ng-init="findOne()">
<form name="artistForm" class="form-horizontal" data-ng-submit="update(artistForm.$valid)" novalidate>
<ng-include src="'/modules/artists/views/partials/form-artist.client.view.html'"></ng-include>
</form>
</section>
In my client controller, I can create an artist :
$scope.create = function() {
var artist = new Artists({
name: this.name
});
artist.$save(function(response) {
//success!
}, function(errorResponse) {
$scope.error = errorResponse.data.message;
});
}
And I can update the name of an artist :
$scope.update = function() {
var artist = $scope.artist;
artist.$update(function() {
//success!
}, function(errorResponse) {
$scope.error = errorResponse.data.message;
});
};
The problem arises when creating an artist, as this.name is undefined. If I change the data-ng-model in the partial to data-ng-model="name", I can create an artist successfully, but the input does not populate with the name in the update form.
Any suggestions on how to effectively merge the two forms in one partial?