将variables传递给AngularJS控制器,最佳实践?
我是AngularJS全新的 ,就像我目前看到的,尤其是模型/视图绑定。 我想利用它来构build一个简单的“添加到篮子”function块。
到目前为止,这是我的控制器:
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>
现在这个工作,但我很怀疑这是在我的模型中创build一个新的产品对象的正确方法。 但是,这是我完全缺乏AngularJS经验的地方。
如果不是这样做,最好的做法是什么?
你可以创build一个篮子服务。 一般在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中并不是很先进,但是我的解决scheme是使用一个简单的JS类(用于咖啡脚本)来扩展Array。
AngularJS的美妙之处在于你可以通过ng-click来传递你的“模型”对象,如下所示。
我不明白使用工厂的好处,因为我发现一个CoffeeScript类不那么漂亮。
我的解决scheme可以在服务中转换,以实现可重用的目的。 但除此之外,我没有看到使用像工厂或服务工具的任何优势。
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
然后你在你的控制器中初始化这个,并为这个动作创build一个函数:
$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)"