Question

我试图将angular.js与X3DOM一起使用。我希望能够创建一个形状（在这种情况下是一个球体），并在用户点击它时让它做一些事情。我已经能够使用传统的onclick方法使其工作。但是，当我切换到角度单击时，事件无法触发。不幸的是，由于我想要显示的数据存储在控制器中，因此使用角度onclick是必须的。

我做了一些研究，据说angular.js与X3DOM没有100％兼容，所以我猜测这是问题的一部分。但我一直在使用其他角度指令而没有问题。有谁知道是否有解决此错误的方法？

代码示例：

<transform translation="{{datum['Market Loading']}} {{datum['Growth Loading']}} {{datum['Size Loading']}}" ng-repeat="datum in energy.data" ng-hide="energy.hide === true" onclick="">
    <shape>
        <appearance>
            <material class="energy" diffuseColor="{{energy.color.join(' ')}}" transparency="{{energy.hide}}"></material>
        </appearance>
        <sphere radius="{{datum['Specific Risk']}} ng-click="DO SOMETHING"></sphere>
    </shape>
</transform>

Answer 1

我猜你需要使用标准的onclick事件，因为X3DOM需要将画布上的点击事件转换为标签内的实际节点，x3dom不知道abaout ng-click。在您的标准onclick处理程序中，您可以检索角度范围，从那里开始点击角点击处理程序。

像这样（untestet）：

<sphere radius="{{datum['Specific Risk']}} onclick="myclick(event)"></sphere>

和标准的onclick事件处理程序：

function myclick(event) {
    // TODO: add more error handling
    var scope = angular.element(event.target).scope();
    scope.yourAngularClickHandler(event);
}

这有点难看，每次点击从dom元素获取范围也可能很慢。我正在做与onmousemove事件类似的事情，速度还可以。不要忘记为范围未准备好或无法找到等情况添加一些错误处理。

单击X3Dom形状

1 个答案: