如何在angularjs中创建一个全局变量？

我试图开发一个购物车，我有产品列表，当用户点击每个产品的详细信息时会显示，我想要添加每个产品到全球地图或用户点击添加到购物车按钮时，如何我可以做到这一点吗？如何在angularjs中创建一个全局变量？

更好地了解这里是我的链接plunker：https://plnkr.co/edit/oo05d6H6AxuJGXBAUQvr?p=preview

这是我的个人资料页面，在这里我想向用户提供与添加到购物车选项：

<!DOCTYPE html> 

<p>ItemName: {{itemName}}</p> 
<p> ItemPrice: {{itemPrice|currency}}</p> 
<p>ItemRating:{{itemRating}}</p> 
<img src="{{itemImage}}"> 
<p><input type = "submit" value = "Add to Cart" ng-click = "addProduct()"></p>

来源

2017-03-04 vennapusa

使用服务。 AngularJS服务是单身人士。全局变量是邪恶的。 –

尝试this版本。

有一个cartService定义在这里，并注入您的ItemCtrl。所有项目都存储在cartService内的cart阵列中。

请注意，此功能一直运行，直到您刷新页面。如果您想要坚持这个cart变量，以便在页面刷新期间不会被擦除，您应该查看localStorage或$cookies。

来源

2017-03-04 17:51:13 eminlala

谢谢，我该如何显示购物车中的物品以及运行代码时图像没有显示 – vennapusa

对不起，我编辑了Plunker链接以显示图像。为了显示购物车项目，您可以创建一个名为'cartDetails.html'的新模板和一个控制器。在你的新控制器中，注入'cartService'并创建一个变量来获取购物车物品，例如'var carItems = cartService.getCart（）;'。接下来，在您的'cartDetails.html'中，您可以使用'ng-repeat'显示您的购物车商品。 – eminlala

嗨，我试图做你自己的方式，你可以说我要去哪里错在这个代码-https：//plnkr.co/edit/oo05d6H6AxuJGXBAUQvr？p =预览 – vennapusa

在你的情况下，一个简单的地方可以在主控制器中存储购物车，因为它可以从嵌套视图的子控制器访问。因此，这里是addProduct()功能如何实现：

app.controller('mobileController', function($scope) { 
    $scope.items = ... 

    $scope.cart = []; 

    $scope.addProduct = function(item) { 
    $scope.cart.push(item); 
    } 
});

等功能可以从产品细节控制器被调用，只要你允许它进入观看item：

<input type= "submit" value="Add to Cart" ng-click="addProduct(item)">

由于那么您可以在主控制器视图中显示更新的购物车（或在其子视图中，因为它仍然可以访问）：

<div ng-repeat="item in cart track by item.name"> 
    <li>{{item.name}}</li> 
</div>

如果您想要多次添加相同的商品，则必须显示订单（或产品序列号）而不是产品。

找到分叉擒纵机构here。

P.S .:另一种选择是将购物车存储在一个Angular服务中，该服务将被注入任何需要它的控制器中。

PPS：我一直在使用$scope像你一样，但你应该更新代码到最新角用途，如使用controllerAs语法和使用控制器类，可以参考this（并在控制器的名称前缀而不是。

来源

2017-03-04 17:53:24 Javarome

如何在angularjs中创建一个全局变量？

回答

相关问题