Pass variables to AngularJS controller, best practice? Pass variables to AngularJS controller, best practice? javascript javascript

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)"