AngularJS :- Calling a function query - html

Question

Building a Shpping Cart using AngularJS .
I had code the code from a user on JSFiddle.
JS:-
function CartForm($scope) {
$scope.invoice = {
items: [{
qty: 10,
description: 'item',
cost: 9.95}]
};
$scope.addItem = function() {
$scope.invoice.items.push({
qty: 1,
description: '',
cost: 0
});
},
$scope.removeItem = function(index) {
$scope.invoice.items.splice(index, 1);
},
$scope.total = function() {
var total = 0;
angular.forEach($scope.invoice.items, function(item) {
total += item.qty * item.cost;
})
return total;
}
}
HTML
<h2>Shopping Card Example</h2>
<div ng:controller="CartForm">
<table class="table">
<tr>
<th>Description</th>
<th>Qty</th>
<th>Cost</th>
<th>Total</th>
<th></th>
</tr>
<tr ng:repeat="item in invoice.items">
<td><input type="text" ng:model="item.description"class="input-small" readonly="readonly"></td>
<td><input type="number" ng:model="item.qty" ng:required class="input-mini"> </td>
<td><input type="number" ng:model="item.cost" ng:required class="input-mini" readonly="readonly"></td>
<td>{{item.qty * item.cost | currency}}</td>
<td>
[<a href ng:click="removeItem($index)">X</a>]
</td>
</tr>
<tr>
<td><a href ng:click="addItem()" class="btn btn-small">add item</a></td>
<td></td>
<td>Total:</td>
<td>{{total() | currency}}</td>
</tr>
</table>
</div>
I want to have the add item outside the table . How do I access the addItem function outside the outside the above snippet of HTML code.
JS Fiddle http://jsfiddle.net/slav123/75m7e/

Answer 1

Your problem is related to scope visibility: you define your cart login in the CartForm scope and you want to access that logic from outside that scope.
There are several ways of doing that:
You could always do it the nasty way: pin any global funcionalities to the $rootScope to make them visible throughout the whole app:
function CartForm($scope, $rootScope) {
// ...
$rootScope.addItem = $scope.addItem;
}
Or you could try a cleaner way: you should pack your cart functionalities into a shared service that you can inject wherever you need it:
app.factory('CartService', function() {
// some cart logic here
// return your cart api
return {
addItem: function() {/*...*/}
}
});
After you defined yor cart logic as a factory, you can use it anywhere you want by simply injecting it as a dependency:
app.controller('MyPageCtrl', function($scope, CartService) {
$scope.cart = CartService;
});
and use the functionality into the view:
<a href ng:click="cart.addItem()" class="btn btn-small">add item</a>