将变量传递给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体验的地方。

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

---

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

---

你可以在外部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);
}

---

我在AngularJS中并不是很先进，但我的解决方案是使用扩展Array的简单JS类（用于咖啡脚本）。

AngularJS的美妙之处在于，你可以通过ng-click来传递你的“模型”对象，如下所示。

我不明白使用工厂的优点，因为我发现CoffeeScript类不那么漂亮。

我的解决方案可以在服务中进行转换，以实现可重用的目的。 但除此之外，我没有看到使用工厂或服务等工具的优势。

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对象被retreived）到函数中：

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

链接地址: http://www.djcxy.com/p/77931.html

上一篇: Pass variables to AngularJS controller, best practice?

下一篇: AngularJS: How do I create controllers in multiple files