Passer des variables à AngularJS contrôleur, les meilleures pratiques?

Question

Je suis tout nouveau à AngularJS et comme ce que j'ai vu jusqu'à présent, en particulier le modèle / vue de liaison. J'aimerais l'utiliser pour construire un simple "ajouter au panier" morceau de fonctionnalité.

C'est mon contrôleur jusqu'à présent:

function BasketController($scope) {
    $scope.products = [];

    $scope.AddToBasket = function (Id, name, price, image) {

        ...

    };
}

Et c'est mon code HTML:

<a ng-click="AddToBasket('237', 'Laptop', '499.95', '237.png')">Add to basket</a>

Maintenant cela fonctionne, mais je doute fortement que c'est la bonne façon de créer un nouvel objet de produit dans mon modèle. Cependant c'est là où mon manque total d'AngularJS expérience entre en jeu.

Si ce n'est pas le moyen de le faire, quelles sont les meilleures pratiques?

Answer 1

Vous pouvez utiliser ng-init dans un div extérieure:

<div ng-init="param='value';">
    <div ng-controller="BasketController" >
        <label>param: {{value}}</label>
    </div>
</div>  

Le paramètre sera alors disponible dans votre contrôleur.

function BasketController($scope) {
        console.log($scope.param);
}

Answer 2

Vous pouvez créer un panier de services. Et généralement en JS vous utilisez des objets au lieu de beaucoup de paramètres.

Voici un exemple: 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;    
}

Answer 3

Je ne suis pas très avancé dans AngularJS, mais ma solution serait d'utiliser un simple JS classe pour vous panier (dans le sens de café script) qui s'étendent au Tableau.

La beauté de AngularJS est que vous pouvez vous passer de "modèle" de l'objet avec ng-cliquez comme indiqué ci-dessous.

Je ne comprends pas l'avantage de l'utilisation d'une usine, que je trouve moins jolie que CoffeeScript classe.

Ma solution pourrait être transformé en un Service, pour réutilisables but. Mais sinon, je ne vois pas l'avantage de l'utilisation d'outils comme l'usine ou d'un 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

Puis vous initialisez cela dans votre contrôleur et de créer une fonction pour cette action:

 $scope.basket = new Basket()
 $scope.addItemToBasket = (item) ->
   $scope.basket.add(item)

Enfin, vous définissez un ng-cliquez sur un point d'ancrage, ici vous passer de votre objet (récupérées à partir de la base de données comme objet JSON) à la fonction:

li ng-repeat="item in items"
  a href="#" ng-click="addItemToBasket(item)"