原网址: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 ui-sku>
<div ng-repeat:"x in X" id='circle'>
<h1> </h1>
</div>
</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插件中改一下源码。后面介绍。
<div class="row f-cb">
<div class="l-col">价格</div>
<div class="r-col price"><span class="yen">¥</span> 259.00</div>
</div>
<div class="row f-cb">
<div class="l-col">尺码</div>
<div class="r-col">
<ul class="m-sku f-cb" >
<li ng-repeat="elem in rement"><span ng-class="{'js-seleted': keyMap['{{elem}}'].selected, 'js-disabled': keyMap['{{elem}}'].disabled}" ng-click="onSelect(elem)">{{elem}}</span></li>
<!--<li><span ng-class="{'js-seleted': keyMap['S'].selected, 'js-disabled': keyMap['S'].disabled}" ng-click="onSelect('S')">S</span></li>
<li><span ng-class="{'js-seleted': keyMap['M'].selected, 'js-disabled': keyMap['M'].disabled}" ng-click="onSelect('M')">M</span></li>
<li><span ng-class="{'js-seleted': keyMap['L'].selected, 'js-disabled': keyMap['L'].disabled}" ng-click="onSelect('L')">L</span></li>
<li><span ng-class="{'js-seleted': keyMap['XL'].selected, 'js-disabled': keyMap['XL'].disabled}" ng-click="onSelect('XL')">XL</span></li>
<li><span ng-class="{'js-seleted': keyMap['ML'].selected, 'js-disabled': keyMap['ML'].disabled}" ng-click="onSelect('ML')">ML</span></li>
<li><span ng-class="{'js-seleted': keyMap['人妖'].selected, 'js-disabled': keyMap['人妖'].disabled}" ng-click="onSelect('人妖')">人妖</span></li>-->
</ul>
</div>
</div>
<div class="row f-cb">
<div class="l-col">颜色</div>
<div class="r-col">
<ul class="m-sku f-cb">
<li><span ng-class="{'js-seleted': keyMap['红色'].selected, 'js-disabled': keyMap['红色'].disabled}" ng-click="onSelect('红色')">红色</span></li>
<li><span ng-class="{'js-seleted': keyMap['橙色'].selected, 'js-disabled': keyMap['橙色'].disabled}" ng-click="onSelect('橙色')">橙色</span></li>
<li><span ng-class="{'js-seleted': keyMap['黄色'].selected, 'js-disabled': keyMap['黄色'].disabled}" ng-click="onSelect('黄色')">黄色</span></li>
<li><span ng-class="{'js-seleted': keyMap['绿色'].selected, 'js-disabled': keyMap['绿色'].disabled}" ng-click="onSelect('绿色')">绿色</span></li>
<li><span ng-class="{'js-seleted': keyMap['蓝色'].selected, 'js-disabled': keyMap['蓝色'].disabled}" ng-click="onSelect('蓝色')">蓝色</span></li>
<li><span ng-class="{'js-seleted': keyMap['紫色'].selected, 'js-disabled': keyMap['紫色'].disabled}" ng-click="onSelect('紫色')">紫色</span></li>
</ul>
</div>
</div>
<div class="row f-cb">
<div class="l-col">性别</div>
<div class="r-col">
<ul class="m-sku f-cb">
<li><span ng-class="{'js-seleted': keyMap['男'].selected, 'js-disabled': keyMap['男'].disabled}" ng-click="onSelect('男')">男</span></li>
<li><span ng-class="{'js-seleted': keyMap['女'].selected, 'js-disabled': keyMap['女'].disabled}" ng-click="onSelect('女')">女</span></li>
</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]},.......]规范。
所以需要把各分类下的规格不重复的放在这个分类下的数组里