将变量传递给AngularJS控制器,最佳实践？

Question

我是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体验的地方.

如果不是这样做的话,最佳做法是什么？

Answer 1

你可以在外部div中使用ng-init:

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

然后,该参数将在您的控制器范围内提供:

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

Answer 2

你可以创建一个篮子服务.通常在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;    
}