0

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

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

代码示例：

<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>
4

1 回答 1

0

我想您需要使用标准的 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 事件做类似的事情，速度还可以。不要忘记为范围未准备好或找不到等情况添加一些错误处理。

于 2016-08-12T06:08:15.123 回答