ng单击X3Dom形状

ng-click on X3Dom shape

本文关键字：形状 X3Dom 单击 ng      更新时间：2023-09-26

我正在尝试将angular.js与X3DOM一起使用。我希望能够创建一个形状（在本例中是一个球体），并在用户点击它时让它做一些事情。我已经能够使用传统的onclick方法让它工作。然而，当我切换到angular的ng点击时，事件无法启动。不幸的是，由于我想要显示的数据存储在控制器中，所以必须使用angular 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>

我想您需要使用标准的onclick事件，因为X3DOM需要将画布上的点击事件转换为标记内的实际节点，而X3DOM不知道是否有点击。在您的标准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事件做类似的事情，速度还可以。不要忘记为范围未准备好或找不到等情况添加一些错误处理。

相关文章：