angularJS 与angujs-sku实现购物车组合查询

最新推荐文章于 2024-05-25 17:33:32 发布

weixin_30588827

最新推荐文章于 2024-05-25 17:33:32 发布

阅读量122

点赞数

原文链接：http://www.cnblogs.com/changyaoself/p/7221672.html

版权

　　　原网址:http://sentsin.com/web/1069.html demo : https://codepen.io/hzxs1990225/pen/VYyOdW 修复版文件下载：https://github.com/WangChangyao/sku.js

　　首先感谢这位博主，使用这个插件也是费了一顿力气，莫名的出现好几个坑。当你只看原网址之后开始使用，你会发现在ui-sku自定义指令的html内部使用angular指令好像失效，因为ui-sku自定义指令已经将作用域改变了。

　　　　使用之前还需在index.html angular.module中注入：‘ ui.angularSku’

　　　　　　</div>

index.html: .controller('name',function($scope){

　　　　　　$scope.X=[1,2,3,4,5,6];

　　　}); //这样没有任何效果，#circle div不会循环。因为此时X作用域不在这个控制器下。那么我们是不是要将这个X的赋值写在插件.js 文件里。那么问题来了，index.html里的请求的数据怎么可能在那个文件下写。

答案：好像只有传值的办法了，怎么传过去呢。先讲解下源代码。

<!DOCTYPE html>

<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="demo.css"/>
<title>Angular SKU Demo</title>
</head>
<body ng-app="skuApp" ng-cloak>
<section ng-controller="skuController" class="m-detail">
<div class="m-detail">
<div class="row"><h1 class="title">5折ONLY秋装新品雪纺衬衫领A字无袖连衣裙裙子女</h1></div>
<div ui-sku split-str="#" sku-data="skuInfo" style='position: ;' on-ok="callback($event)" eles-data="reelement" init-sku="M#红色#男"> //在这里初始化：添加ui-sku开始组合查询，代码里其他类名没有特殊意义。不用刻意的去研究。eles-data为自定义的，用于解决传值的问题，也就是解决上面的问题。这个需要在angular.js插件中改一下源码。后面介绍。

</ul>
</div>
</div>
</div>
<div class="row f-cb">
<div class="l-col">库存</div>
<div class="r-col account">{{count||805}}件</div>
</div>
</div>
</section>
<script src="angular.min.js"></script>
<script src="angular-sku.js"></script>

<script src="demo.js">

　　// 这里对$scope.skuInfo进行赋值，固定的数据格式：$scope.skuInfo = {"S#红色#男": {"count": 0,jf:1,price:2,},"S#红色#女": {"count": 0},"S#橙色#男": {"count": 1,},"S#橙色#女": {"count": 1}}。。。。。。

//当有XXXXL这个号但没其他规格，那么只需增加这样的数据格式：“XXXXL##” :{"count" :1};同理当有人妖没其他号和颜色时增加数据格式："##人妖":{count : 1};

</script>

特别注意看一下上面带颜色的几行。是不是找到传值的答案了，$scope.skuInfo是在index的控制器里定义的，但通过“sku-data” 这个属性将值传到了angular-sku这个控件里。那么我们也创建一个将值传过去。

这里是angular-sku文件里的代码，在这里增加了 elesData：‘=’，用于传值。然后将这个值传给$scope.categoryAttrs,那么index.html ui-sku组件中绑定的categoryAttrs变量就为这个值，angular-sku充当中转站的角色。

细心的朋友会发现，我这里用到了$timeout()来赋值处理，因为index.html有请求，数据会异步，当主页中还在请求数据，代码已经执行到这里，那么就会赋值失败。

那么坑又来了：$scope.skuInfo这个数据是在请求中获取得到的，所以也会异步，当执行到angu-sku.js时，$scope.skuInfo为undefined。该怎么解决？

1.延迟加载sku.js文件？？不可行，怎么注入：ui.angularSku。先注入只会报错，系统找不到这个模块。

　2.像 elesData一样延迟传过来。但并不能阻止sku.js后面的代码对$scope.skuInfo这个数据的处理。会报错： input sku-data error;

所以也让后面的代码延迟执行，加个监听器

将整个link函数中要执行的代码放进这个延时器中。

似乎好像没有坑了：接下来是不是还要对选中的规格进行数据处理啊。是不是在点击事件中取到被选中的规格名称。比如选中S 橙色男，那么怎样取到呢？ng-click？已经被占用了。况且这个作用域也在sku.js中，所以也调用不了index下的函数。

但demo.js中是不是将S 橙色男匹配到的count值通过callback给返回了，那么sku.js文件中也就帮我们取到了这“S” “橙色” “男”三个匹配的名称。我们也通过callback给返回到index利用。sku.js作以下修改：

每一次点击

都会通过callback将选中的值给打印出来，如图会打印一个数组["M","红色","男"]。

使用说明：skuInfo数组需要严格按照颜色#大小#重量：{count:11,imgUrl:".....",price:""}规范。categoryATTRS数组需要按照[{kind1:[type1,type2,type3]},{kind2:[type1,type2,type3]},.......]规范。

　　　　　所以需要把各分类下的规格不重复的放在这个分类下的数组里

转载于:https://www.cnblogs.com/changyaoself/p/7221672.html