在Angular / Ionic中的parent指令上触发DOM元素方法

Question

我目前正在试用aframe.io，使用VR光标点击一个按钮，退出VR体验。

我想要发生的是当光标点击事件在盒子和纸板光标点击指令被触发时-然后转到vr-video-control指令，这样它就可以在场景中执行exitVR()方法。环顾四周，我知道直接的DOM操作应该在“link”中完成，但公开可用的方法应该在“controller”中声明-那么如何在“controller”的方法中访问“link”的$element属性呢？或者有比这更好的方法吗？

现在我不能访问链接到vr-video-control指令的scene元素来触发任何方法。

我的HTML看起来像这样：

​

<a-scene vr-video-control>
      <a-assets>
        <video id="video" src="video/video4.mp4" autoplay loop crossorigin="anonymous"></video>
      </a-assets>

      <a-videosphere src="#video" rotation="0 180 0">
          	
        <a-box id="videoLeftButton" cardboard-cursor-click cardboard-cursor-action="back" color="white" height="2" width="5" position="-7 0 10" rotation="0 -225 0"></a-box>
        <a-box id="videoRightButton" cardboard-cursor-click cardboard-cursor-action="forward" color="white" height="2" width="5" position="7 0 10" rotation="0 -135 0"></a-box>

      </a-videosphere>
</a-scene>

​

其中cardboard-cursor-click是一个指令，如下所示

​

 function CardboardCursorClick() {

  return {
    restrict: 'A',
    require: '^^vrVideoControl',
    scope: { 
      cardboardCursorAction: '@'
    },
    link: (scope, element, attrs, videoControl) => {
      element.on('cursor-click', () => {
        console.log("Cursor click " + scope.cardboardCursorAction);
        videoControl.exitVR();
      });
    }
  };
}

export default {
  name: 'cardboardCursorClick',
  fn: CardboardCursorClick
};

​

这依赖于父指令vr-video-control：

​

function VRVideoControl() {

  return {
    restrict: 'AE',
    scope: { item: '&' },
    controller: ['$scope', function($scope) {
      this.exitVR = function(cursorAction) {
        //Trigger exitVR() on <a-scene>
      }
    }]
  };
}

export default {
  name: 'vrVideoControl',
  fn: VRVideoControl
};

​