Should I pass data between the directive and the service?
I have a page with a controller that has a directivewhich displays a form with inputs.
Directive has an object containing all inputs (and their ng-model) that are displayed on the form. This binds the form input data to an object variable inside the directive.
I need to display results (and other actions) that submit form data.
For this, I created a service that handles business logic and thae ajax calls.
The questions are here ... How do I access the form data from the service to perform the required actions? I was thinking about accessing a directive variable from a service, but I'm not sure how to do it, and if this is the correct way to go in the first place.
source to share
service
should contain a model, which is basically your form's javascript object.
directive
should inject a service and add that object to its scope (link).
directive template
should speak to directive scope
and display the form.
Changing the value in the view will reflect the service as we have the same reference and the view will update the directive scope as there is a two-way binding.
source to share
Truth be told, I'm still working, but I think if you add a controller between your directive and the service, things are a little clearer. This is the most compact example of a basic structure I've played with. (Forgive the coffee pot if this is not your thing).
angular.module 'app'
.controller 'KeyFormCtrl', (SessionService, $scope, $location, $log) ->
@error = null
@message = null
@keySent = false
@creds =
username: null
@sendKey = ->
SessionService.sendKey({ username: @creds.username })
.then(
(resp) =>
@keySent = true
(err) =>
@error = err.error
)
.directive 'eaKeyForm', ->
{
restrict: 'AE'
scope: {}
templateUrl: 'session/key-form.html'
replace: true
controller: 'KeyFormCtrl'
controllerAs: 'kfc'
bindToController: true
}
session / key-form.html:
<form>
<div ng-show="kfc.error">{{kfc.error}}</div>
<div ng-show="kfc.message">{{kfc.message}}</div>
<div ng-show="kfc.keySent">
An account key has been sent to {{kfc.creds.username}}.<br />
</div>
<div ng-hide="kfc.keySent">
<input type="email" ng-model="kfc.creds.username">
<button ng-click="kfc.sendKey()">Send Key</button>
</div>
</form>
source to share
angular.module('myApp', [])
.directive('myAweseomDirective', ['MyAwesomeService', function(MyAwesomeService) {
return {
link: function(scope) {
scope.saveFormDetails = function() {
MyAweseomeService.saveInformation(scope.data);
//where data is the ng-model for the form
}
}
};
}])
.service('MyAweseomService', function() {
MyAwesomeService.saveInformation = function(data) {
//do whatever you want to with the data
}
});
source to share