AJAX query inside directive template - angularjs

Question

I have a directive that creates multiple form elements:
// Directive
app.directive('comboInput', function(){
return {
scope: {
imodel: '=',
dmodel: '=',
bmodel: '=',
inputname: '#',
integers: '=',
decimals: '='
},
templateUrl: templatePath + 'combo-input.html'
}
});
// Template
<select id="" ng-model="imodel" ng-change="bmodel=imodel+dmodel" ng-options="value for value in integers"></select>
<select id="" ng-model="dmodel" ng-change="bmodel=imodel+dmodel" ng-options="(value|fraction) for value in decimals"></select>
<input type="number" name="{{inputname}}" ng-model="bmodel">
// Usage
<combo-input inputname="width" bmodel="width" imodel="widthI" dmodel="widthD" integers="ints" decimals="decs"></combo-input>
This application's controller has a method to grab a price:
$scope.getProductPrice = function(){
return $http.post('/customize/angular/getProductPrice', {
sku: '$scope.sku',
width: $scope.width,
height: $scope.height
}).then(function(response){
$scope.productPrice = parseFloat(response.data).toFixed(2);
});
}
I use this method on various parts of the form, typically by calling ng-change="getProductPrice()" on some form element; however, this does not work when calling it from the template.
I have tried a number of different answers I've found here on SO, but none of them work as expected (like infinite $http calls that run forever), or maybe if they do, the person submitting the answer provided no comments or other details on why the code works so I am unable to adapt to my needs. On top of this, various methods all use different techniques, some deprecated, so there is no consistency to figuring out what I need to do.
How can I call getProductPrice() from my directive's template?
Edit
I've created a Plunker to demonstrate the old value being passed to the getProductPrice() method.
http://plnkr.co/edit/1nRs26nTaSOztjvVyLYg?p=preview

Answer 1

You directive has an isolated scope (scope: {...}) so it will not have access to the upper controller scope's variables and methods, such as getProductPrice.
What you can do is pass this method as a parameter to your directive:
app.directive('comboInput', function () {
return {
scope: {
imodel: '=',
dmodel: '=',
bmodel: '=',
inputname: '#',
integers: '=',
decimals: '=',
on-change: '&'
},
templateUrl: templatePath + 'combo-input.html'
}
});
Which you then instanciate like this:
<combo-input ... on-change="getProductPrice()"></combo-input>
And then you just need to call scope.onChange() from your directive to call this function that has been bound to the on-change attribute.
Or you can even directly bind it to the built-in ng-change:
<input ... ng-change="onChange()">
UPDATE: if you want to pass specific parameters for this call, you can simply add them in the method signature:
$scope.getProductPrice = function(width, height) { ... }
And also in the directive binding:
<combo-input ... on-change="getProductPrice(width, height)"></combo-input>
And then all you need to do is call onChange with these parameters. If you write that in the HTML, it is as simple as:
<input ng-change="onChange(width, height)">
(Making sure that width and height are in your directive scope obviously so it can be used from the HTML).
If you want to call that from the code, either width and height are already in your scope, in which case you only need to call scope.onChange(). However if they are not, you can add these parameters just for this call with this specific syntax:
scope.onChange({width: value1, height:value2})
Another approach is to make this Ajax method a service instead of a controller function. By injecting the service in your directive, you could directly call myService.getProductPrice(). The advantage of the parameter binding is that you can reuse your directive with a different behavior, but if it will always call that function then a service is prefered.

Answer 2

Since you declared the scope oft your directive to be a new one, just the entries that you declare are bound between this scope and the outer (with your method in it).
You can either pass the function to the directive scope using the scope hash of the directive definition object or you add another ng-controller with the same controller inside the directive.