Pass variables to AngularJS controller, best practice?
You could use ng-init in an outer div:
<div ng-init="param='value';"> <div ng-controller="BasketController" > <label>param: {{value}}</label> </div></div>
The parameter will then be available in your controller's scope:
function BasketController($scope) { console.log($scope.param);}
You could create a basket service. And generally in JS you use objects instead of lots of parameters.
Here's an example: http://jsfiddle.net/2MbZY/
var app = angular.module('myApp', []);app.factory('basket', function() { var items = []; var myBasketService = {}; myBasketService.addItem = function(item) { items.push(item); }; myBasketService.removeItem = function(item) { var index = items.indexOf(item); items.splice(index, 1); }; myBasketService.items = function() { return items; }; return myBasketService;});function MyCtrl($scope, basket) { $scope.newItem = {}; $scope.basket = basket; }
I'm not very advanced in AngularJS, but my solution would be to use a simple JS class for you cart (in the sense of coffee script) that extend Array.
The beauty of AngularJS is that you can pass you "model" object with ng-click like shown below.
I don't understand the advantage of using a factory, as I find it less pretty that a CoffeeScript class.
My solution could be transformed in a Service, for reusable purpose. But otherwise I don't see any advantage of using tools like factory or service.
class Basket extends Array constructor: -> add: (item) -> @push(item) remove: (item) -> index = @indexOf(item) @.splice(index, 1) contains: (item) -> @indexOf(item) isnt -1 indexOf: (item) -> indexOf = -1 @.forEach (stored_item, index) -> if (item.id is stored_item.id) indexOf = index return indexOf
Then you initialize this in your controller and create a function for that action:
$scope.basket = new Basket() $scope.addItemToBasket = (item) -> $scope.basket.add(item)
Finally you set up a ng-click to an anchor, here you pass your object (retreived from the database as JSON object) to the function:
li ng-repeat="item in items" a href="#" ng-click="addItemToBasket(item)"