My task is to create a form and display the entered data to a div on clicking 'Submit'. The task involves creating two directives, one for creating the form and another for displaying the entered data. These should be connected using a 'service' to communicate with the two controllers corresponding to the two directives. However, I'd created two directives, but in the script file, I'm having some issues. Please help.
Here is the plunker link : HERE
$scope.getFaster = function() {
$scope.name = $scope.modelName;
$scope.age = $scope.modelAge;
$scope.place = $scope.modelPlace;
$scope.gender = $scope.modelGender;
};
Something is wrong in the fasterBack.js file
Update:
Updated Plunker: http://plnkr.co/edit/bsFxDn3RQCGlmZLJMAil?p=preview
I have made it work with and without service, both examples in the plunker. They work only on submit button press.
Update ends
Updated plunker with working solution. I have NOT used a service for this. However, if you want to use a service for your more complex purpose, let me know and I will update the plunker. However, to clarify for you, you have to use two controllers and a service and not directive.
What I have done here in this plunker is just wrapped the two directives in a controller that you had created and made minor modifications to directives (added replace to remove the custom elements and changed model names in the display directive to be same as form directive).
index.html
<div ng-controller="fasterCtrl">
<faster-form></faster-form>
<faster-display></faster-display>
</div>
fasterDisplay.html
<div>
<div>Name : {{modelName}} </div><br>
<div>Age : {{modelAge}}</div><br>
<div>Place : {{modelPlace}}</div><br>
<div>Gender : {{modelGender}}</div><br>
</div>