ng单击X3Dom形状

Question

I'm trying to use angular.js with X3DOM. I want to be able to create a shape (in this case a sphere), and have it do something when the user clicks on it. I've been able to get it to work using the traditional onclick method. However, when I switch to angular's ng-click, to event fails to fire. Unfortunately, since the data that I want to display is stored within the controller, using the angular onclick is kind of a must.

I've done a bit of research and supposedly angular.js isn't 100% compatible with X3DOM, so I'm guessing this is part of the issue. But I've been using other angular directives without an issue. Does anyone know if there's a way around this error?

Code Sample:

<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

I guess you need to use the standard onclick event, as X3DOM needs to translate click events on the canvas to the actual node inside the tag and x3dom does not know abaout ng-click. In your standard onclick handler you can retrieve the angular scope aganain an fire your angular click handler from there.

Something like this (untestet):

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

and a standard onclick event handler:

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

This is a bit ugly and getting the scope from the dom element on every click may also be slow. I'm doing something similar with an onmousemove event and the speed is okay. Don't forget to add some error handling for the cases where the scope is not ready or cannot be found etc.