Javascript 角形滴丸

我想用一个下拉列表来创建有角度的药片。 我已经做到了这一点，但问题是只有span或a是可点击的，而不是药片的其余部分。 但是，如果我单击药丸，它仍然会高亮显示药丸，但不会执行我单击药丸时必须执行的任务。我如何才能实现整个跨度是可点击的，而不仅仅是文本

下面是我的代码：

<div data-tabset="" type="pills">
        <div style="height: 80px" data-tab="" data-active="item.active" data-ng-repeat="item in items" data-ng-if="(item.Processes.length >= 1)">
            <div data-tab-heading="">

                <span style="height: 80px" class="dropdown" ng-if="(item.Processes.length > 1)">
                    <span class="dropdown-toggle">
                        {{item.Name}}
                    </span>
                    <ul class="dropdown-menu">
                        <li ng-repeat="proc in item.Processes">
                            <a dropdown-toggle ng-click="Function2(item.ID,proc.UniqueID)">{{proc.Description}}</a>
                        </li>
                        <li>
                            <a dropdown-toggle ng-click="Function1(item.ID,-1)">all</a>
                        </li>
                    </ul>
                </span>
                <span style="height: 80px" ng-if="(item.Processes.length == 1)" ng-click="Function1(item.ID,item.proc.UniqueID)">{{item.Name}}</span>
            </div>

        </div>
    </div>

---

通过在所有跨距上添加一个函数来解决此问题，该函数检查选择的值，取消选择所有跨距并选择该值。这并不是说单击现在起作用，而是至少现在选择的不是错误的

Html:

---

我希望它能帮助其他人

点击标签上的ng？问题在于避孕药。在li下拉列表中，它可以工作，但在这里，它仅在我单击文本时才会下拉

 <div data-tabset="" type="pills">
        <div data-ng-if="(subsidiaries.length == 0)"><h2>U heeft geen werkmaatschappijen om te tonen</h2></div>
        <div style="height: 80px" data-tab="" data-active="sub.active" data-ng-repeat="sub in subsidiaries" data-ng-click="setPillSelected()" data-ng-if="(sub.Processes.length >= 1)">
            <div data-tab-heading="">

                <span style="height: 80px" class="dropdown" dropdown ng-if="(sub.Processes.length > 1)">
                    <span class="dropdown-toggle" dropdown-toggle>
                        {{sub.Name}}
                    </span>
                    <ul class="dropdown-menu">
                        <li ng-repeat="proc in sub.Processes">
                            <a ng-click="generateFunnelData(sub.SubsidiaryID,proc.SubsidiaryProcessID, true)">{{proc.Description}}</a>
                        </li>
                        <li>
                            <a ng-click="generateFunnelData(sub.SubsidiaryID,-1, true)">alles</a>
                        </li>
                    </ul>
                </span>
                <span style="height: 80px" ng-if="(sub.Processes.length == 1)" ng-click="generateFunnelData(sub.SubsidiaryID,sub.proc.SubsidiaryProcessID, true)">{{sub.Name}}</span>
            </div>

        </div>
    </div>

setPillSelected: function () {
    var self = this;
    self.$.subsidiaries.forEach(function(subsidiary) {
        if (subsidiary.SubsidiaryID == self.$.subsidiary.SubsidiaryID) {
            subsidiary.active = true;
        } else {
            subsidiary.active = false;
        }
    });


},