html - 带有 clipPath 的 div 的单击事件在 angular.js 中不起作用

Question

我这里有一些问题。我有一个在其边框上带有 SVG 的 div。我想向 div 添加一个点击事件，但 SVG 不允许点击事件在 div 上工作。这是组件的模板:

<div class="input-container dash-bordered clipped-left-borders">
    <div class="input-filed no-icon-field">
        <span class="icon-plane-left-down input-icon-font"></span>
        <input type="text" class="input" placeholder="something" (click)="toggleDestinationDropDown(true)" />
    </div>
</div>

<svg id="clipSvg" viewBox="0 0 500 0">
    <defs>
        <clipPath id="clipLeft" clipPathUnits="objectBoundingBox" transform="scale(0.002 0.01)">
            <path d="M-20 0 A3 2, 0, 0 0, 20 0 L20 100 A3 2, 0, 0 0, -20 100 L0 20" fill="royalblue" stroke="black" />
            <rect x="20" y="0" width="500" height="100" />
        </clipPath>

        <clipPath id="clipRight" clipPathUnits="objectBoundingBox" transform="scale(0.002 0.01)">
            <path d="M520 0 A3 2, 0, 0 1, 480 0 L480 100 A3 2, 0, 0 1, 520 100 L500 20" fill="royalblue"
                stroke="black" />
            <rect x="0" y="0" width="480" height="100" />
        </clipPath>
    </defs>
</svg>

这是CSS:

.clipped-left-borders {
  clip-path: url(#clipLeft);
}


#clipSvg {
  width: 0px;
  height: 0px;
  pointer-events: none;
}

我该如何解决这个问题？？？

Answer 1

angularjs 使用 ng-click 指令而不是 (click) ，后者是 angular +2 版本语法。

因此在您的 HTML 中将 (click)="toggleDestinationDropDown(true)" 替换为 ng-click="toggleDestinationDropDown(true)"