将变量传递给AngularJS控制器,最佳实践
Pass variables to AngularJS controller, best practice?
我是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经验的原因。
如果不是这样做,最佳实践是什么?
您可以在外部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);
}
您可以创建一个购物篮服务。在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;
}
我在AngularJS方面不是很高级,但我的解决方案是使用一个简单的JS类来扩展Array。
AngularJS的美妙之处在于,您可以像下面所示那样通过ng点击来传递"模型"对象。
我不明白使用工厂的好处,因为我发现它没有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点击,在这里您将您的对象(从数据库中检索为JSON对象)传递给函数:
li ng-repeat="item in items"
a href="#" ng-click="addItemToBasket(item)"
相关文章:
- 在控制器之间传递变量的最佳方式
- 将 DOM 操作与 Angular 控制器分离 - 需要最佳实践
- 木偶控制器最佳实践
- 使用UI路由器实现控制器A的最佳实践方法
- 将变量传递给AngularJS控制器,最佳实践
- 将特性插入到角度控制器中阵列中的对象中的最佳方式
- 更新视图和控制器之间的角度重复数据值的最佳方式是什么
- 扩展或定义新的dat.gui属性控制器的最佳方法
- 将JSON从PHP控制器传递到AngularJS控制器的最佳方式
- 单元测试AngularJS控制器,同时遵循最佳实践
- 分离AngularJs控制器代码的最佳方法
- 在不同控制器之间共享数据的最佳角度方式
- 在 Javascript 中访问控制器变量的最佳方法是什么?
- 在Javascript中添加由Rails控制器红色数据的最佳方法是什么?
- 使用渲染控制器隐藏/显示多个表面的最佳方法
- AngularJS 控制器功能最佳实践
- 从控制器调用指令中函数的最佳方法是什么
- EmberJS:基于另一个属性重新加载控制器模型的最佳方法
- Rails 4 - 最佳实践 - 如何显示包含来自不同控制器的数据的视图
- 在$rootScope和控制器之间切换布尔值的最佳方式