Передать переменные контроллеру AngularJS, передовой опыт?

Я новичок в AngularJS и, как и то, что я видел до сих пор, особенно модель/просмотр привязки. Я хотел бы использовать это для создания простой функциональности "добавить в корзину".

Это мой контроллер:

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

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

        ...

    };
}

И это мой HTML:

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

Теперь это работает, но я очень сомневаюсь, что это правильный способ создания нового объекта продукта в моей модели. Однако это то, где моя полная нехватка опыта AngularJS вступает в игру.

Если это не способ сделать это, лучше всего?

Ответ 1

Вы можете создать услугу корзины. И вообще в JS вы используете объекты вместо множества параметров.

Вот пример: 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;    
}

Ответ 2

Вы можете использовать ng-init в внешнем div:

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

Затем параметр будет доступен в области вашего контроллера:

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

Ответ 3

Я не очень продвинутый в AngularJS, но моим решением было бы использовать простой класс JS для вашей тележки (в смысле кофе script), которые расширяют Array.

Красота AngularJS заключается в том, что вы можете передать вам "модельный" объект с помощью ng-click, как показано ниже.

Я не понимаю преимущества использования factory, так как я считаю его менее симпатичным, чем класс CoffeeScript.

Мое решение может быть преобразовано в Службу для повторного использования. Но в противном случае я не вижу преимущества использования таких инструментов, как factory или 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

Затем вы инициализируете это в своем контроллере и создаете функцию для этого действия:

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

Наконец, вы установите ng-click на якорь, здесь вы передаете свой объект (полученный из базы данных как объект JSON) в функцию:

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