Question

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

我想要发生的是当盒子上的光标点击事件和纸板光标点击指令触发时 - 然后转到vr-video-control指令，以便它可以执行exitVR（）方法现场。我知道通过查看直接DOM操作应该在＆＃39;链接＆＃39;但是应该在“控制器”中声明公开可用的方法。 - 那么如何访问＆＃39; link＆＃39;的$ element属性？在一个＆＃39;控制器＆＃39;？的方法或者有更好的方法吗？

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

我的HTML看起来像：

＆＃13;

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

＆＃13;

其中cardboard-cursor-click是一个看起来像这样的指令

＆＃13;

 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
};

＆＃13;

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

＆＃13;

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
};

＆＃13;

Answer 1

通过使用指令中的范围我已经意识到我可以将方法公开地暴露给其他控制器，同时在链接方法中保持DOM操作。我仍然是Angular的新手，但不确定这是最好的方法吗？

return {
    restrict: 'A',
    controller: ['$scope', function($scope) {
      this.exitVR = function(cursorAction) {
        $scope.exitVR(cursorAction);
      };
    }],
    link: (scope, element, attrs) => {
      scope.exitVR = function(cursorAction) {
        var rawElement = angular.element(element)[0]
        rawElement.exitVR();
      };
    }
  };

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

1 个答案: